自动显示工具提示 - Javascript

什么是自动显示工具提示（Automatic Tooltip）？

自动显示工具提示是指当鼠标悬停在某个元素上时，自动弹出该元素相关信息的文本提示框。在网页设计中，自动显示工具提示通常用于帮助用户快速了解某个操作或元素的作用。

如何实现自动显示工具提示？

在Javascript中，可以通过以下步骤来实现自动显示工具提示：

1. 为需要添加自动显示工具提示的元素添加一个title属性，该属性值即为提示文本内容。

   <button title="这是一个按钮">按钮</button>
   

2. 在Javascript中，选取需要添加自动显示工具提示的元素，使用addEventListener()方法，监听mouseover事件，当鼠标移动到该元素上时，触发事件执行相应的操作。

   const btn = document.querySelector('button');
   btn.addEventListener("mouseover", function() {
     // 显示提示
   });
   

3. 在事件处理函数中，创建一个文本节点，将title属性中的内容复制到该节点中，再添加到DOM中，以实现提示框的显示。

   const btn = document.querySelector('button');
   btn.addEventListener("mouseover", function() {
     const tooltip = document.createElement('span');
     tooltip.innerText = this.getAttribute('title');
     tooltip.classList.add('tooltip');
     document.body.appendChild(tooltip);
   });
   

CSS实现样式美化

为了让提示框更加美观、易于识别，我们可以通过CSS样式为其添加一些装饰效果，如背景色、边框、阴影等。

.tooltip {
  position: absolute;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 5px;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  z-index: 99999;
}

示例代码

<button title="这是一个按钮">按钮</button>

<script>
  const btn = document.querySelector('button');

  btn.addEventListener("mouseover", function() {
    const tooltip = document.createElement('span');
    tooltip.innerText = this.getAttribute('title');
    tooltip.classList.add('tooltip');
    document.body.appendChild(tooltip);
  });

  btn.addEventListener("mouseout", function() {
    const tooltip = document.querySelector('.tooltip');
    if (tooltip) {
      tooltip.remove();
    }
  });
</script>

<style>
  .tooltip {
    position: absolute;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    padding: 5px;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    z-index: 99999;
  }
</style>

以上代码演示了如何通过Javascript实现一个自动显示工具提示的功能，并通过CSS样式实现了样式美化的效果。