使用css实现tooltip，并针对单个气泡进行位置调整
<!DOCTYPE html>
<html>
<head>
<title>气泡提示</title>
<style type="text/css">
.tooltip .tooltiptext{
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 0px 3px 6px 0px
rgba(0, 0, 0, 0.18);
font-size: 12px;
color: #fff;
text-align: left;
border-radius: 8px;
padding: 10px;
/* 定位 */
position: absolute;
z-index: 3;
white-space: nowrap;
}
.tooltip .tooltiptextRaw{
/* 提示信息 */
position:absolute;
z-index: 3;
border:6px solid rgba(0, 0, 0, 0.7);
border-color: transparent transparent rgba(0, 0, 0, 0.7);
width:0;
height:0;
bottom:-10px;
left:-53px;
}
.c-onlineTime:hover .tooltip{
visibility: visible;
}
</style>
</head>
<body>
<span style="color: #1fb5ab;font-size:14px;" class="c-onlineTime">
有效在线时长
<span class="tooltip">
<span class="tooltiptextRaw"></span>
<span class="tooltiptext" style="top: 10px;left: -80px;"> /*调整tooltip的位置*/
有效在线时长为课堂中学生的实际在线时长（等于课程<br/>结束时间-课堂开始时间-退出累计时长）
</span>
</span>
</span>
</body>
</html>
