当前位置：首页 > JavaScript

js实现tips

2026-02-02 00:32:50JavaScript

实现基础的Tooltip提示框

使用HTML和CSS创建Tooltip结构，通过JavaScript控制显示和隐藏。HTML部分需要为触发元素添加data-tooltip属性存储提示内容：

<button data-tooltip="这是提示内容">悬停查看提示</button>

CSS定义Tooltip样式和初始隐藏状态：

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  white-space: nowrap;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

动态生成Tooltip组件

通过JavaScript动态创建和销毁Tooltip元素，适合需要更复杂控制的场景：

js实现tips

document.querySelectorAll('[data-tooltip]').forEach(el => {
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = el.dataset.tooltip;
  document.body.appendChild(tooltip);

  el.addEventListener('mouseenter', (e) => {
    const rect = el.getBoundingClientRect();
    tooltip.style.left = `${rect.left + rect.width/2}px`;
    tooltip.style.top = `${rect.top - 5}px`;
    tooltip.style.transform = 'translate(-50%, -100%)';
    tooltip.style.visibility = 'visible';
  });

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

对应CSS：

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

带箭头的Tooltip实现

在Tooltip底部添加箭头指示器，修改CSS伪元素：

js实现tips

[data-tooltip]::after {
  /* 原有样式 */
  margin-bottom: 10px;
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s;
}

[data-tooltip]:hover::before {
  opacity: 1;
}

延迟显示和动画效果

添加显示延迟和动画效果提升用户体验：

let showTimeout;
document.querySelectorAll('[data-tooltip]').forEach(el => {
  el.addEventListener('mouseenter', () => {
    showTimeout = setTimeout(() => {
      el.setAttribute('data-show-tooltip', 'true');
    }, 300);
  });

  el.addEventListener('mouseleave', () => {
    clearTimeout(showTimeout);
    el.removeAttribute('data-show-tooltip');
  });
});

对应CSS修改：

[data-tooltip]::after {
  /* 原有样式 */
  transition: opacity 0.3s, transform 0.2s;
  transform: translateX(-50%) translateY(10px);
}

[data-show-tooltip]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}