html tooltip

作者：伪言发布日期:2025-08-05 浏览:16

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置tooltip的样式 */
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black; /* 下划线效果 */
        }

        /* Tooltip文本的容器 */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* 将tooltip放置在元素上方 */
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* 显示tooltip */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

<!-- 使用tooltip -->
<p>将鼠标悬停在文本上以查看tooltip：</p>
<div class="tooltip">悬停我
  <span class="tooltiptext">这是提示信息！</span>
</div>

</body>
</html>

解释说明：

HTML结构:
- 使用<div>标签创建一个包含tooltip的元素。
- class="tooltip"用于定义整个tooltip容器。
- class="tooltiptext"用于定义实际显示的tooltip文本。
CSS样式:
- .tooltip: 定义了相对定位和下划线效果。
- .tooltip .tooltiptext: 定义了tooltip文本的样式，包括背景色、文字颜色、位置等。
- visibility: hidden和opacity: 0: 初始状态下隐藏tooltip。
- transition: opacity 0.3s: 添加淡入淡出效果。
- .tooltip:hover .tooltiptext: 当鼠标悬停时，显示tooltip并设置透明度为1。

上一篇：网站html模板

下一篇：requests_html