5.00 / 1 oy

HTML'de imleci div üzerinde bekletince tooltip göstermek

HTML kodlarınızda bir div'e tooltip (mouse imleci ile bir yerin üzerinde bekletince çıkan açıklama yazısı) eklemek için div'e tooltip özelliğini eklemek yeterli.

<div title="div hakkında açıklama">
  merhaba
</div>

Ama eğer amacınız, tooltip görselinin arka planını değiştirmek ve daha hoş bir efekt ile görünür olmasını sağlamak ise sadece HTML & CSS ikilisi ile aşağıdaki gibi daha şık tooltip tasarımları sunabilirsiniz.

HTML:

<div data-tooltip="Div hakkında daha şık bir açıklama">Merhaba</div>

 

CSS:

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    transition: all 0.15s ease;
    padding: 10px;
    color: red;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[data-tooltip]:hover:before {
    opacity: 1;
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;    
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

div {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
}

 

Editör editi: benzer içerikli bazı diğer yazılar için;

bkz: Bootstrap'te Disabled Button'da Tooltip Göstermek

bkz: Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)

bkz: HTML'de base etiketi nedir ve ne işe yarar?

bkz: HTML ve CSS ile kayan yazı yapmak

bkz: HTML'de editlenebilir fatura sayfası tasarlamak

bkz: Boş HTML5 JQuery Sayfa Kodu Şablonu

RainingCodes

28.04.2021 16:09

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
HTML'de imleci div üzerinde bekletince tooltip göstermek

İ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.