5.00 / 1 oy

div'e tooltip nasıl eklenir? (HTML ve CSS)

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?

koroglu

04.06.2021 00:11

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
div'e tooltip nasıl eklenir? (HTML ve CSS)

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.