带气泡的文本提示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
   visibility: hidden;
    width: 120px;
    background-color:skyblue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* 定位 */
   position: absolute;
   left:20px;
   top:25px;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;

}
.tooltip .tooltiptext::after{content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: skyblue transparent transparent transparent ;}
</style>
</head>
<body>

<div class="tooltip">HTML中文网
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>
转载于:https://my.oschina.net/u/4004801/blog/3030741