Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Tooltip Yapımı Konusunu öğreneceğiz.
Kullanıcı fare imlecini bir etiketin üzerine getirdiğinde, bir şeyler hakkında bilgi ekranı oluşturmak istiyorsak "Tooltip" oluştururuz.
Kullanıcı fareyi bir etiketin üzerine getirdiğinde görünen bir tooltip oluşturalım.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basit Tooltip Yapımı</h2>
<p>Fareyi aşağıdaki metnin üzerine getirin:</p>
<div class="tooltip">Üzerime Gel
<span class="tooltiptext">Tooltip yazısı</span>
</div>
</body>
</html>
Tooltip araçlarına etiketler üzerinden ok oluşturmak için, CSS'in "content" özelliğiyle birlikte ::after sözde elementi kullanılabilir. Okun kendisi border kullanılarak oluşturulur. Bu, tooltip'in bir konuşma balonu gibi görünmesini sağlayacaktır.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>CSS Tooltip Yapımı</h2>
<div class="tooltip">Üzerime Gel
<span class="tooltiptext">Tooltip içeriği</span>
</div>
</body>
</html>
Tooltip görünür hale gelmek üzereyken solmasını istiyorsanız, CSS transition özelliğini opacity özelliğiyle birlikte kullanabilir ve belirtilen sürede (1 saniye) tamamen görünmez olmaktan %100 görünür hale geçebilirsiniz.):