引导工具提示在悬停时保持打开 - JavaScript

引导工具提示（也称为提示框或工具提示）是网页开发中常用的交互元素，用于在用户悬停（hover）或点击某个元素时显示相关信息。

然而，在某些情况下，我们希望工具提示保持打开状态，即使用户将鼠标移出了触发工具提示的元素。本文将介绍如何使用 JavaScript 实现保持工具提示打开的效果。

实现方法

以下是一个简单的实现方法，可以通过 JavaScript 将工具提示保持打开：

// HTML
<span class="tooltip">Hover me
  <span class="tooltiptext">Hello, I'm a tooltip</span>
</span>

// CSS
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  width: 200px;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

上面的代码中，我们定义了一个含有工具提示文本的 HTML 元素，通过 CSS 的 :hover 伪类选择器来控制工具提示的显示和隐藏。在 JavaScript 中，我们添加以下代码来实现保持工具提示打开的效果：

// JavaScript
const tooltip = document.querySelector('.tooltip');

tooltip.addEventListener('mouseleave', () => {
  tooltip.classList.add('show');
});

tooltip.addEventListener('mouseenter', () => {
  tooltip.classList.remove('show');
});

这段代码使用 mouseleave 和 mouseenter 事件来控制工具提示的显示和隐藏。当鼠标离开工具提示区域时，将添加 show 类，显示工具提示。当鼠标再次进入工具提示区域时，将移除 show 类，隐藏工具提示。

结论

通过以上的实现方法，我们可以在用户鼠标离开触发工具提示的元素后，仍然保持工具提示的打开状态。这在某些场景下特别有用，比如当用户需要复制工具提示中的文本时，可以方便地选取文本而不用担心工具提示关闭。

请注意以上代码只是一个基本实现方法，你可以根据自己的需求对工具提示进行进一步的定制和功能扩展。

参考资料：

• CSS :hover 选择器
• mouseenter 事件
• mouseleave 事件