第二十二课--提示工具(Tooltip)..tooltip ..tooltip:hover ./*在提示工具内定位箭头:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示工具(Tooltip)</title>
</head>
<style>
    .tooltip {
        display: inline-block;
        border-bottom: 1px dotted black;
        position: relative;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        top: -5px;
        left: 105%;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    /*在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。*/
    /*注意：border-width 属性指定了箭头的大小。如果你修改它，也要修改 margin-left 值。这样箭头在能居中显示。*/
    /*border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。*/
    /*以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色*/
    /*可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。*/
    .tooltip .tooltiptext::after {
        content: " ";
        position: absolute;
        top: 50%;
        right: 100%; /* 提示工具左侧 */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
    }

    .tooltip .tooltiptext {
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip:hover .tooltiptext {
        opacity: 1;
    }
</style>
<body>
<div class="tooltip">
    请把鼠标移到此处
    <span class="tooltiptext">提示文字</span>
</div>
</body>
</html>