教你玩转CSS 提示工具(Tooltip)

如何使用 HTML 与 CSS 来创建提示工具。

提示工具在鼠标移动到指定元素后触发

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示：

    <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;
        padding: 5px 0;
        border-radius: 6px;
     
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
     
    /* 鼠标移动上去后显示提示框 */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    </style>
     
    <div class="tooltip">鼠标移动到这
      <span class="tooltiptext">提示文本</span>
    </div>

实例解析

HTML) 使用容器元素 (like <div>) 并添加 “to