当前位置：首页 > JavaScript

tooltips 实现 js

2026-04-06 19:27:52JavaScript

使用原生 JavaScript 实现 Tooltips

通过监听鼠标事件动态创建提示框元素，适用于简单场景。

// 获取需要添加 tooltip 的元素
const elements = document.querySelectorAll('[data-tooltip]');

elements.forEach(element => {
  // 创建 tooltip 元素
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = element.dataset.tooltip;
  document.body.appendChild(tooltip);

  // 鼠标移入显示
  element.addEventListener('mouseenter', (e) => {
    tooltip.style.display = 'block';
    const rect = element.getBoundingClientRect();
    tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
  });

  // 鼠标移出隐藏
  element.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
});

.tooltip {
  position: absolute;
  display: none;
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 100;
}

使用 CSS 伪元素实现简单 Tooltips

纯 CSS 方案适合不需要复杂交互的场景。

<button class="tooltip" data-tooltip="点击提交">提交</button>

.tooltip {
  position: relative;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
}

使用第三方库实现高级 Tooltips

对于复杂需求，推荐使用成熟的工具库如 Tippy.js。

安装 Tippy.js：

npm install tippy.js

基本使用：

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

tippy('#element', {
  content: '自定义内容',
  placement: 'top',
  animation: 'fade',
  theme: 'light',
  arrow: true
});

高级配置示例：

tippy('[data-tooltip]', {
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  onShow(instance) {
    if (!reference.hasAttribute('data-loaded')) {
      fetchContent().then(data => {
        instance.setContent(data);
        reference.setAttribute('data-loaded', true);
      });
    }
  }
});

实现可访问性 Tooltips

确保 tooltips 对屏幕阅读器友好。

const button = document.getElementById('tooltip-button');
const tooltip = document.createElement('div');
tooltip.setAttribute('role', 'tooltip');
tooltip.setAttribute('id', 'tooltip-content');
tooltip.textContent = '提示信息';

button.setAttribute('aria-describedby', 'tooltip-content');
document.body.appendChild(tooltip);

button.addEventListener('focus', showTooltip);
button.addEventListener('blur', hideTooltip);
button.addEventListener('mouseenter', showTooltip);
button.addEventListener('mouseleave', hideTooltip);

function showTooltip() {
  tooltip.style.visibility = 'visible';
}

function hideTooltip() {
  tooltip.style.visibility = 'hidden';
}

响应式 Tooltips 定位

自动调整位置避免超出视口。

tooltips 实现 js

function positionTooltip(element, tooltip, position = 'top') {
  const elemRect = element.getBoundingClientRect();
  const tooltipRect = tooltip.getBoundingClientRect();
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  let top, left;

  switch(position) {
    case 'top':
      top = elemRect.top - tooltipRect.height;
      left = elemRect.left + (elemRect.width - tooltipRect.width) / 2;
      if (top < 0) position = 'bottom';
      break;
    case 'bottom':
      top = elemRect.bottom;
      left = elemRect.left + (elemRect.width - tooltipRect.width) / 2;
      if (top + tooltipRect.height > viewportHeight) position = 'top';
      break;
    // 其他方向处理...
  }

  // 最终位置调整
  tooltip.style.top = `${Math.max(0, top)}px`;
  tooltip.style.left = `${Math.max(0, Math.min(left, viewportWidth - tooltipRect.width))}px`;
}