Day1-CSS 提示工具(Tooltip)

<body style="text-align:center">
    <div class="tooltip">鼠标移动到这
        <span class="tooltiptext">提示文本</span>
    </div>
</body>

<style>
        .tooltip{
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
        .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;
            /* 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
        }
        .tooltip:hover .tooltiptext{
            visibility: visible;
        }
    </style>

CSS

.tooltip .tooltiptext{
    /* 可以通过用top 属性把这个文章居中，然后通过right属性把文章变到左边
            因为默认的时候是放在右边的 */
            top: -5px;
            right: 105%;
        }

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.tooltip{

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext{

visibility: hidden;

120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 100%;

left: 50%;

margin-left: -60px;

/* 这里是left就是为了在上面的时候可以前面边界居中

margin-left就是为了让整体居中

bottom就是为了可以放在上面

也可以通过设置top：100%让他放在下面的 */

}

.tooltip:hover .tooltiptext{

visibility: visible;

}

</style>

</head>

鼠标移动到我这

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tooltip{
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
        .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: 100%;
            left: 50%;
            margin-left: -60px;
            /* 这里是left就是为了在上面的时候可以前面边界居中
            margin-left就是为了让整体居中
            bottom就是为了可以放在上面
            也可以通过设置top：100%让他放在下面的 */
        }
        .tooltip:hover .tooltiptext{
            visibility: visible;
        }
        .tooltip .tooltiptext::after{
            /* :after 选择器向选定的元素之后插入内容。 */
           /* 通过content来插入内容的
           absolute就是为了接着提示框的后面，但是为了可以放在
           提示款的底部中间的话，通过top和left还有margin-left的配合
           因为这个是没有内容的，全部是通过边框来构成的，所以border-width和margin-left是同样的
           通过设置color 其实就是一个正方向，正面的部分是黑色的
           下面左边右边都是透明的，就可以变成箭头的样式了 */

            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }
    </style>
</head>
<body style="text-align: center;">
    <p> 23333332</p>
    <p> 23333332</p>
    <p> 23333332</p>
    <div class="tooltip">
        鼠标移动到我这
        <span class="tooltiptext">提示文本</span>
    </div>
</body>
</html>

带有箭头的头部提示框

淡入提示框的效果，呈现出，慢慢变深的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.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: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>提示工具淡入效果</h2>
<p>鼠标移动到以下元素，提示工具会再一秒内从 0% 到 100% 完全显示。</p>

<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

HTML+CSS