TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊
這是可以做到與CSS只，沒(méi)有JavaScript的根本：運(yùn)行演示
應(yīng)用自定義HTML屬性，例如。tooltip="bla bla"到您的對(duì)象（div或其他）：
<div tooltip="bla bla">
something here
</div>
將:before每個(gè)[tooltip]對(duì)象的偽元素定義為透明，絕對(duì)定位并以tooltip=""值作為內(nèi)容：
[tooltip]:before {
position : absolute;
content : attr(tooltip);
opacity : 0;
}
定義:hover:before每一個(gè)的懸停狀態(tài)[tooltip]以使其可見(jiàn)：
[tooltip]:hover:before {
opacity : 1;
}
將樣式（顏色，大小，位置等）應(yīng)用于工具提示對(duì)象；故事結(jié)局。
在演示中，我定義了另一條規(guī)則，以指定當(dāng)工具提示懸停在工具提示上時(shí)，是否必須消失，但在父提示之外，具有另一個(gè)自定義屬性tooltip-persistent和一個(gè)簡(jiǎn)單的規(guī)則：
[tooltip]:not([tooltip-persistent]):before {
pointer-events: none;
}
注意1：為此，瀏覽器的覆蓋范圍非常廣泛，但請(qǐng)考慮對(duì)舊IE使用javascript后備（如果需要）。
注意2：增強(qiáng)功能可能是添加一些JavaScript，以通過(guò)更改應(yīng)用于鼠標(biāo)的類(lèi)來(lái)計(jì)算鼠標(biāo)位置并將其添加到偽元素中。
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
您根本不需要JavaScript。只需設(shè)置title屬性：
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
請(qǐng)注意，工具提示的視覺(jué)呈現(xiàn)方式取決于瀏覽器/操作系統(tǒng)，因此它可能會(huì)淡入，而可能不會(huì)淡入。但是，這是進(jìn)行工具提示的語(yǔ)義方式，并且可以與屏幕閱讀器等輔助功能軟件一起正常工作。
堆棧片段中的演示
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
舉報(bào)