Tooltip nedir ilk önce ondan bahsedeyim. Tooltip, bir HTML öğesinin üzerine geldiğiniz zaman görünen açıklamadır. Böyle anlatınca bilmeyenler için pek anlamlı olmayabilir. Aşağıdaki ekran görüntüsüne bakabilirsiniz. Orada bir elementin üzerine gelince bir açıklama çıkıyor.
İşte bu yazıda böyle bir tooltip'i nasıl yapabilirsiniz bundan bahsedeceğim. Başlıkta da bahsettiğim üzere sadece HTML ve CSS kullanacağım.
İlk olarak HTML kodlarımızı şöyle verelim:
<div class="element">
Ben bir tooltip'e sahibim
<div class="tooltip">Ben bir tooltip'im!</div>
</div>
Bu kodlarda tooltip eklemek istediğimiz elementin içine child olarak bir element daha oluşturuyoruz ve class yani sınıf olarak "tooltip" değerini veriyoruz. Class olarak vermemin sebebi, ID'ler sadece bir element için kullanılır. Birden fazla element için class'lar önerilir.
Şimdi de CSS kodlarını veriyorum:
.element {
background: #ececec;
color: #555;
font-size: 20px;
margin: 200px auto;
padding: 15px 0px;
position: relative;
text-align: center;
width: 230px;
}
Bu blokta; "element" class'ına sahip HTML elementimize arkaplan rengi, yazı rengi, yazı boyutu, dıştan öteleme, içten öteleme, genişlik, yazı hizası gibi özellikleri veriyoruz. Burada dikkat etmemiz gereken position değeridir.
.element .tooltip {
background: #525252;
bottom: 100%;
color: #fff;
display: block;
left: 0;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
transform: translateY(10px);
transition: all .25s ease-out;
}
Bu blokta ise; "element" class'ına sahip elementimizin içindeki "tooltip" class'ına sahip elemente bazı özellikler veriyoruz. Burada dikkat etmemiz gerekenler; opacity, transform, position ve margin-bottom değerleridir.
.element .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #525252 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
Bu blokta, "tooltip" class'ına sahip elementimizi referans alacak şekilde after pseudo elementini oluşturuyoruz. Bu pseudo element ile aşağıdaki fotoğrafta yer alan üçgen görünümlü işaretleme okunu oluşturuyoruz. Tabii ki bu çokta gerekli bir şey değil ancak yan yana birden fazla element bulunuyorsa kullanılması faydalı olacaktır.
.element:hover .tooltip {
opacity: 1;
pointer-events: none;
transform: translateY(0px);
}
Bu blokta, "element" class'ına sahip elementimizin üzerine gelindiğinde "tooltip" class'ına sahip elementimizin ne yapacağını, nasıl bir görünüşe sahip olacağını belirliyoruz. Hatırlarsanız üstteki bloklarda "tooltip" class'ına sahip elementin opacity değerini "0" yapmıştık yani görünmüyordu. Şimdi, "element" class'ına sahip elementimizin üzerine geldiğimizde tooltip'imizin görünmesi için opacity değerini 1'e çekiyoruz. Translate Y değeri ise sıfırlanıyor ki aşağıdan yukarıya doğru bir kayma efekti oluşsun.
Çıktıyı görmek istiyorsanız: Codepen.io
