当前位置：首页 > JavaScript

js实现tooltip

2026-03-15 02:09:30JavaScript

实现基本的Tooltip功能

使用纯JavaScript实现Tooltip可以通过监听鼠标事件动态创建和显示提示框。以下是一个基础实现示例：

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

// 创建tooltip元素并添加到body
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
document.body.appendChild(tooltip);

// 为每个触发元素添加事件监听
tooltipTriggers.forEach(trigger => {
  trigger.addEventListener('mouseenter', showTooltip);
  trigger.addEventListener('mouseleave', hideTooltip);
});

function showTooltip(e) {
  const text = e.target.getAttribute('data-tooltip');
  tooltip.textContent = text;
  tooltip.style.display = 'block';

  // 定位tooltip
  const rect = e.target.getBoundingClientRect();
  tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
  tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
}

function hideTooltip() {
  tooltip.style.display = 'none';
}

添加CSS样式

配合以下CSS样式可以使Tooltip更美观：

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

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

使用HTML5 title属性替代

对于简单需求，可以直接使用HTML5的title属性：

<button title="这是一个提示">悬停我</button>

第三方库实现

如果需要更丰富的功能，可以考虑使用第三方库：

Tippy.js - 功能强大的现代tooltip库

import tippy from 'tippy.js';
tippy('[data-tooltip]', {
content: (reference) => reference.getAttribute('data-tooltip'),
});

Popper.js - 提供精确的定位计算


import { createPopper } from '@popperjs/core';

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

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


### 实现动画效果

为Tooltip添加淡入淡出动画：

```css
.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip.visible {
  opacity: 1;
}

function showTooltip(e) {
  // ...其他代码
  tooltip.classList.add('visible');
}

function hideTooltip() {
  tooltip.classList.remove('visible');
  setTimeout(() => tooltip.style.display = 'none', 200);
}

响应式定位

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

js实现tooltip

function positionTooltip(element, tooltip) {
  const rect = element.getBoundingClientRect();
  const viewportWidth = window.innerWidth;

  let left = rect.left + rect.width/2 - tooltip.offsetWidth/2;
  let top = rect.top - tooltip.offsetHeight - 5;

  // 防止超出视口
  if (left < 5) left = 5;
  if (left + tooltip.offsetWidth > viewportWidth - 5) {
    left = viewportWidth - tooltip.offsetWidth - 5;
  }

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