當我們在設計網頁的時候，經常會遇到這樣一種情況，當用戶將鼠標懸停在一個元素上時，需要顯示該元素的詳情，比如圖片的一些描述，甚至是一個鏈接的具體地址等等。這時候，我們可以使用CSS來實現這個非常實用的效果。

/* CSS代碼 */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltiptext {
visibility: hidden;
background-color: #000;
color: #fff;
border-radius: 5px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

以上代碼中，我們使用了一個偽元素來實現三角形朝下的效果。同時，通過設置position屬性的值為relative和absolute，再加上bottom、left和margin-left屬性，來確定工具提示框的位置。我們還通過設置visibility屬性的值實現了鼠標經過時才顯示的效果。

我們可以將這段CSS代碼應用于任何元素中，只需將其包裝在一個class為“tooltip”的容器中即可。對于需要顯示詳情的元素，我們只需在這個容器中添加一個class為“tooltiptext”的子元素，并在其中添加詳細信息。

這個效果不僅可以讓網頁設計更加美觀，更重要的是，它可以幫助用戶更好地理解頁面上的元素，提升用戶體驗。