tooltip özelliğini herhangi bir html elementine zaten ekleyebiliyoruz, üzerine de mouse imleci ile gelerek bir süre bekleyince tooltip görünür oluyor.
<div title="merhaba reitix" class="visible">
<span>merhaba</span>
</div>
Ama tooltip için kendi css stillerimizi yazmak istersek (renk, font, margin gibi özellikleri kullanabilmek için) ve tooltip'i bazı durumlarda gizlemek istersek aşağıdaki gibi bir HTML ve CSS kodu uygulayabiliriz.
HTML:
<div data-tooltip="merhaba reitix" class="goster">
<span>selam</span>
</div>
CSS:
[data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}
[data-tooltip]:hover:before {
opacity : 1; color:red;
}
Editör editi: sitede yer alan bazı diğer benzer başlıklar için;
bkz: HTML'de imleci div üzerinde bekletince tooltip göstermek
bkz: Bootstrap'te Disabled Button'da Tooltip Göstermek
bkz: Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)
bkz: CSS ile fare imlecini gizlemek
bkz: CSS bir programlama dili midir?