如果你想在網(wǎng)頁(yè)中顯示提示信息,可以使用CSS為元素添加tooltip效果。Tooltip是指在鼠標(biāo)懸浮于某個(gè)元素上時(shí),彈出提示框顯示該元素的信息。
/*創(chuàng)建Tooltip樣式*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /*去除下劃線(xiàn)*/ } /*創(chuàng)建提示框樣式*/ .tooltip .tooltiptext { visibility: hidden; /*默認(rèn)隱藏提示框*/ width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; /*放置在頂層*/ bottom: 125%; /*位于元素頂部*/ left: 50%; /*水平居中*/ margin-left: -60px; /*使提示框居中*/ } /*鼠標(biāo)懸浮時(shí)顯示提示框*/ .tooltip:hover .tooltiptext { visibility: visible; }
在HTML中,我們需要為元素添加class屬性,class的值為“tooltip”,并將需要顯示的信息添加在span標(biāo)簽內(nèi)。例如:
<p>這是一段<span class="tooltip">帶tooltip提示框<span class="tooltiptext">你好啊</span></span> 的文字</p>
在實(shí)際應(yīng)用中,還可以通過(guò)CSS自定義tooltip樣式,增加動(dòng)畫(huà)效果等。使用CSS加Tooltip可以為網(wǎng)頁(yè)添加更多的交互體驗(yàn),提升用戶(hù)體驗(yàn)。