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