<div>添加tooltip用于在網頁上顯示某個元素的相關信息或者提示。tooltip可以在用戶將鼠標懸停在元素上時顯示，以幫助用戶更好地理解元素的含義或者提供某種操作提示。在HTML中，可以借助CSS和JavaScript來實現tooltip的效果。</div>
以下是幾個使用div添加tooltip的代碼案例：
案例一：
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
<br>
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
<br>
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<br>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br>
</body>
</html>在上述代碼中，定義了一個tooltip類，設置了相對定位（position: relative），并且將顯示指針設為手型（cursor: pointer）。在tooltip類內部，定義了tooltiptext類，用于設置tooltip的樣式。通過設置tooltiptext類的visibility屬性為hidden，使其默認狀態下不可見，通過設置hover狀態下的tooltiptext類的visibility屬性為visible，使其在鼠標懸停時變為可見。
案例二：
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
<br>
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
<br>
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<br>
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
</style>
</head>
<body>
<br>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br>
</body>
</html>在上述代碼中，相較于第一個案例，添加了tooltiptext::after偽元素。通過設置該偽元素的樣式，使得在tooltip下方顯示一個小三角形，起到更好的指示作用。
案例三：
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
<br>
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
<br>
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<br>
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
</style>
<script>
function showTooltip() {
document.getElementById("tooltip").style.visibility = "visible";
}
<br>
function hideTooltip() {
document.getElementById("tooltip").style.visibility = "hidden";
}
</script>
</head>
<body>
<br>
<div class="tooltip" onmouseover="showTooltip()" onmouseout="hideTooltip()">
Hover over me
<span id="tooltip" class="tooltiptext">Tooltip text</span>
</div>
<br>
</body>
</html>在上述代碼中，相較于前兩個案例，添加了JavaScript的交互功能。通過定義showTooltip和hideTooltip兩個函數，并在tooltip類的外層div的onmouseover和onmouseout事件中調用這兩個函數，實現了當鼠標懸停在tooltip上時，tooltip顯示，當鼠標離開tooltip時，tooltip隱藏的效果。
通過以上幾個代碼案例，我們可以靈活運用div、CSS和JavaScript來實現添加tooltip的效果，以提升用戶體驗和網頁的交互性。