CSS 教程（4）-实例--提示框

1.最基础的提示框

<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
    top: 0px;
}

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

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

</body>

这个是最基本的提示框，设置外层的定位为相对定位，里层的提示框定位为绝对定位，就是相对于父容器来说的。

如果要让提示框右边显示，那么可以将定位那段代码换成如下：

 /* 定位 */ 
position: absolute;
    top: -5px;
    left: 105%;//注意是105%就是本元素长度的有点空就行。

显示在左侧

position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;

显示在顶部

 position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;

显示在底部

 position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;

2.提示框显示箭头


<html>
<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: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: red transparent transparent transparent;
}

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

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

</body>
</html>

上面的例子是在顶部显示一个带箭头的提示框，箭头向下指。
注意after，其实就是在被提示框后面加了一个空元素，然后利用此元素的边框等搞出来一个箭头而已。
注意：例子的颜色，故意使用红色，便于观察。

如果提示框在下边，那么需要改：
1.提示框位置需要修改为
bottom: 150%;--->top: 150%;
2.箭头需要修改：
top: 100%;---->bottom: 100%;
border-color: black transparent transparent transparent;---> border-color: transparent transparent red transparent;

这样修改后，箭头和提示框才对。

3.提示框淡入淡出


<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 10s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<br>
<br>
<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>

隐藏的时候设置：
/* 淡入 - 1秒内从 0% 到 100% 显示: */
opacity: 0;
transition: opacity 10s;//时间是10s

完成显示：
visibility: visible;
opacity: 1;

这样就能实现淡入淡出了。

最后编辑于：2017.11.28 18:00:38