你可以帮我写一个使用tooltip鼠标悬停显示文本的代码吗

当然可以，以下是一个使用 JavaScript 和 CSS 实现 Tooltip 效果的示例代码：

HTML 代码：

<button class="tooltip">按钮</button>

CSS 代码：

.tooltip {
  position: relative;
  border-bottom: 1px dotted black; /* 下划线样式 */
}

.tooltip::after {
  content: attr(data-tooltip); /* 显示的文本 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background-color: black;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0; /* 默认不可见 */
  transition: opacity 0.3s ease-in-out; /* 渐变动画 */
}

.tooltip:hover::after {
  opacity: 1; /* 鼠标悬停时可见 */
}

JavaScript 代码：

const tooltips = document.querySelectorAll('.tooltip');

tooltips.forEach((tooltip) => {
  tooltip.setAttribute('data-tooltip', '这是一个Tooltip'); // 设置 Tooltip 文本
});

这段代码会为页面中所有 class 为 tooltip 的元素添加 Tooltip 效果。当用户将鼠标悬停在元素上方时，会显示一个黑色背景、白色文本的 Tooltip，其中包含设置的文本“这是一个Tooltip”。您可以根据需要修改 CSS 样式和 JavaScript 代码来实现自定义的 Tooltip 效果。