如何使用 JavaScript 向 div 添加工具提示？

在现代 Web 开发中，工具提示是一个常见的 UI 功能。当鼠标悬停在某个元素上时，会弹出一个小窗口，显示一些额外信息或说明。本文将介绍如何使用 JavaScript 向 div 元素添加工具提示。

实现方法

具体实现过程如下，我们首先需要为要添加工具提示的 div 元素添加一个 title 属性，这个属性的值就是工具提示的内容。然后，我们可以使用 JavaScript 监听 mouseover 和 mouseout 事件，在鼠标移入和移出时显示或隐藏工具提示。

示例代码如下：

<div class="tooltip" title="这是一个工具提示">我是一个 div 元素</div>

const tooltip = document.querySelectorAll('.tooltip');

tooltip.forEach(el => {
  el.addEventListener('mouseover', () => {
    const tooltipText = el.getAttribute('title');
    const tooltipElement = document.createElement('div');
    tooltipElement.classList.add('tooltip-element');
    tooltipElement.innerText = tooltipText;
    el.appendChild(tooltipElement);
  });
  
  el.addEventListener('mouseout', () => {
    const tooltipElement = el.querySelector('.tooltip-element');
    tooltipElement && el.removeChild(tooltipElement);
  });
});

上述代码中，我们首先使用 querySelectorAll 方法获取所有带有 tooltip 类名的 div 元素，然后分别为它们绑定 mouseover 和 mouseout 事件。

在 mouseover 事件中，我们使用 getAttribute 方法获取 title 属性的值，然后使用 createElement 方法创建一个新的 div 元素，将工具提示的内容设置为该元素的文本节点，同时添加 tooltip-element 类名用于样式控制。最后，我们使用 appendChild 方法将该元素添加到要显示工具提示的 div 元素中。

在 mouseout 事件中，我们使用 querySelector 方法获取要删除的工具提示元素，如果存在则使用 removeChild 方法将其从 DOM 树中删除。

样式控制

为了让工具提示更加美观，我们还需要添加一些 CSS 样式控制。下面是一个简单示例：

.tooltip-element {
  position: absolute;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 999;
  cursor: default;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

在样式表中，我们给工具提示元素设置了绝对定位、黑色背景、白色文字、12px 的字体大小、4px 的内边距和圆角边框等属性。同时，我们将工具提示元素的 white-space 属性设置为 nowrap 以保证文字不换行，将 z-index 属性设置为 999 以保证它在顶层显示。

此外，我们通过设置 top、left 和 transform 属性将工具提示元素定位在目标元素的下方并水平居中。最后，我们将 cursor 属性设置为 default，使其在鼠标悬停时使用默认鼠标样式。

结语

现代 Web 开发中，工具提示是一个常见的 UI 应用，给用户提供了更好的交互体验。使用 JavaScript 向 div 添加工具提示，可以帮助我们更好地控制工具提示的样式和行为，为用户提供更好的交互体验。