x
1
2
<html>3
<head>4
<meta charset="utf-8">5
</head>6
<style>7
.tooltip {8
position: relative;9
display: inline-block;10
border-bottom: 1px dotted black;11
}12
13
.tooltip .tooltiptext {14
visibility: hidden;15
width: 120px;16
background-color: black;17
color: #fff;18
text-align: center;19
border-radius: 6px;20
padding: 5px 0;21
22
/* 定位 */23
position: absolute;24
z-index: 1;25
top: -5px;26
right: 105%;27
}28
29
.tooltip:hover .tooltiptext {30
visibility: visible;31
}32
</style>33
<body style="text-align:center;">34
35
<h2>左侧提示工具</h2>36
<p>鼠标移动到以下元素:</p>37
38
<div class="tooltip">鼠标移动到我这39
<span class="tooltiptext">提示文本</span>40
</div>41
42
</body>43
</html>