当前位置：首页 > JavaScript

tooltips 实现 js

2026-02-02 02:18:56JavaScript

实现 Tooltips 的 JavaScript 方法

使用原生 JavaScript 实现 Tooltips

创建一个简单的 tooltip 可以通过监听鼠标事件来实现。以下是一个基础实现：

// 获取所有带有 tooltip 属性的元素
const tooltipElements = document.querySelectorAll('[data-tooltip]');

// 为每个元素添加事件监听
tooltipElements.forEach(element => {
  const tooltipText = element.getAttribute('data-tooltip');
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = tooltipText;
  document.body.appendChild(tooltip);

  // 鼠标移入时显示 tooltip
  element.addEventListener('mouseenter', (e) => {
    tooltip.style.display = 'block';
    updateTooltipPosition(e, tooltip);
  });

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

  // 鼠标移动时更新 tooltip 位置
  element.addEventListener('mousemove', (e) => {
    updateTooltipPosition(e, tooltip);
  });
});

// 更新 tooltip 位置
function updateTooltipPosition(e, tooltip) {
  const x = e.clientX + 10;
  const y = e.clientY + 10;
  tooltip.style.left = `${x}px`;
  tooltip.style.top = `${y}px`;
}

对应的 CSS 样式：

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

使用 CSS 伪元素实现简单 Tooltips

对于简单的 tooltip，可以仅使用 CSS 实现：

<span class="css-tooltip" data-tooltip="This is a tooltip">Hover me</span>

.css-tooltip {
  position: relative;
}

.css-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;
}

使用第三方库实现高级 Tooltips

如果需要更复杂的 tooltip 功能，可以考虑使用以下流行库：

Tippy.js - 功能强大的 tooltip 库

import tippy from 'tippy.js';
tippy('[data-tippy-content]', {
animation: 'fade',
arrow: true,
});

Popper.js - 定位引擎，可与多种工具提示库配合使用
```
import { createPopper } from '@popperjs/core';
```

const button = document.querySelector('#button'); const tooltip = document.querySelector('#tooltip');

createPopper(button, tooltip, { placement: 'right', });


3. Bootstrap Tooltips - 如果使用 Bootstrap 框架
```javascript
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

动画效果增强

为 tooltip 添加动画效果可以提升用户体验：

.tooltip {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip.show {
  opacity: 1;
}

// 修改显示/隐藏逻辑
element.addEventListener('mouseenter', (e) => {
  tooltip.classList.add('show');
  updateTooltipPosition(e, tooltip);
});

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

响应式考虑

确保 tooltip 在不同屏幕尺寸下都能正确显示：

function updateTooltipPosition(e, tooltip) {
  const x = e.clientX + 10;
  const y = e.clientY + 10;

  // 防止 tooltip 超出视口
  const tooltipWidth = tooltip.offsetWidth;
  const tooltipHeight = tooltip.offsetHeight;

  const adjustedX = x + tooltipWidth > window.innerWidth 
    ? window.innerWidth - tooltipWidth - 10 
    : x;

  const adjustedY = y + tooltipHeight > window.innerHeight 
    ? window.innerHeight - tooltipHeight - 10 
    : y;

  tooltip.style.left = `${adjustedX}px`;
  tooltip.style.top = `${adjustedY}px`;
}

tooltips 实现 js