tooltips 实现 js

实现 JavaScript Tooltips 的方法

使用原生 JavaScript 创建 Tooltips

通过 HTML 和 CSS 结合 JavaScript 动态显示和隐藏提示框。以下是一个简单的实现示例：

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  .tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

<div class="tooltip">Hover over me
  <span class="tooltip-text">Tooltip text</span>
</div>

使用事件监听器动态控制

对于更复杂的交互，可以通过 JavaScript 动态添加和移除 tooltip：

document.querySelectorAll('.tooltip').forEach(element => {
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip-text';
  tooltip.textContent = element.getAttribute('data-tooltip');
  element.appendChild(tooltip);

  element.addEventListener('mouseenter', () => {
    tooltip.style.visibility = 'visible';
    tooltip.style.opacity = '1';
  });

  element.addEventListener('mouseleave', () => {
    tooltip.style.visibility = 'hidden';
    tooltip.style.opacity = '0';
  });
});

使用第三方库

流行的 JavaScript 库如 Tippy.js 提供更丰富的功能：

// 使用 Tippy.js
import tippy from 'tippy.js';
tippy('[data-tippy-content]', {
  animation: 'fade',
  arrow: true,
  placement: 'top',
});

对应的 HTML：

<button data-tippy-content="Tooltip text">Hover me</button>

响应式定位解决方案

对于需要动态计算位置的场景，可以使用 getBoundingClientRect()：

function positionTooltip(element, tooltip) {
  const rect = element.getBoundingClientRect();
  tooltip.style.left = `${rect.left + window.scrollX}px`;
  tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 5}px`;
}

无障碍访问增强

为 tooltip 添加 ARIA 属性提升可访问性：

<button aria-describedby="tooltip1">Button</button>
<div id="tooltip1" role="tooltip">Helpful information</div>

对应的 JavaScript：

document.querySelector('button').addEventListener('focus', showTooltip);
document.querySelector('button').addEventListener('blur', hideTooltip);

这些方法涵盖了从简单实现到高级功能的不同需求，可根据项目具体要求选择适合的方案。原生实现适合轻量级需求，而第三方库则提供更多预设样式和交互效果。