CSS鼠標懸停提示文字，可以讓網頁更加用戶友好，讓用戶更好地了解頁面內元素的功能。下面我們來簡單介紹一下如何在CSS中實現鼠標懸停提示文字。

/*樣式定義*/
.tooltip {
position: relative;
display: inline-block;
}
/*鼠標懸停時顯示的提示框*/
.tooltip:hover::after {
content: attr(data-tooltip);
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem;
background-color: #333;
color: #fff;
border-radius: 0.25rem;
font-size: 0.75rem;
}
/*HTML代碼*/
<p>這是一個<span class="tooltip" data-tooltip="提示信息">帶有提示信息</span>的文字。</p>

我們首先需要定義一個帶有提示信息的元素，這里使用的是一個帶有class為tooltip的span標簽，并在其data-tooltip屬性中寫入提示信息。

接著，在CSS中定義.tooltip樣式，用于設置元素的基本樣式。我們將其設置為相對定位，使其成為其后代絕對定位的參照物。

在:hover偽類下，使用::after偽元素來添加提示框。content屬性中使用attr(data-tooltip)來獲取元素data-tooltip屬性中的值，使用display:block來使其顯示出來。

接著，我們設置提示框的位置和樣式。將其position屬性設置為absolute，top為100%，left為50%并transform: translateX(-50%)以將其水平居中，padding和border-radius屬性用來設置樣式，最后將其font-size設置為較小的值以增強體驗。

最后，我們只需要將帶有tooltip類的元素嵌入到需要添加提示框的地方即可。