css tooltip

作者：旭旭移日发布日期:2025-07-22 浏览:54

<!DOCTYPE html>
<html>
<head>
<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the text */
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>

<h2>Tooltip CSS Example</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

解释说明：

Tooltip 容器：tooltip 类用于定义一个容器，当鼠标悬停在这个容器上时，会显示提示文本。
Tooltip 文本：tooltiptext 类定义了提示文本的样式，包括背景颜色、文字颜色、对齐方式等。它默认是隐藏的 (visibility: hidden)，并且通过 position: absolute 定位在容器的上方。
显示 Tooltip：当鼠标悬停在 .tooltip 上时，.tooltiptext 的 visibility 属性变为 visible，并且通过 opacity 实现淡入效果。

上一篇：css 绝对定位居中

下一篇：css position 居中