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