Merhaba, bu yazımda HTML Tooltip Örnekleri konusuna bakacağız. Burada HTML’in varsayılan tooltipleri değil kendi yaptıklarımız olacak.
HTML Tooltip Örnekleri
Fazla açıklama yapmaya gerek duymadan direk html ve css kodlarını vermek istiyorum. (Şimdi html vs css programlama dili değil o yüzden de o html ve css kod değil vs tartışmasına girmek istemiyorum. :D )
Bu konuya asıl ihtiyaç duyma sebebim olan, tooltip içerisinde HTML ögeleri kullanabilmeyi istememdir. Teknik olarak tooltip kullanmıyoruz yani orjinal tooltip kullanmıyoruz. Sadece Tooltip’i simule ediyoruz. Bir projemde böyle bir şeye ihtiyaç duymuştum. Faturalar listesinde bir faturanın üzerine gelindiğinde detayları hakkında fikir vermesi noktasında gerekli olmuştu.
HTML ve CSS kodlarımız aşağıdaki gibidir.
HTML Tooltip Örnek 1
<!DOCTYPE html>
<html>
<style>
/*right position*/
.tooltipright {
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 200px;
height: 100px;
background-color: lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: hidden;
}
.tooltipright:hover .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft {
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 200px;
height: 50px;
background-color: lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Farklı Konumlarda Tooltip</h2>
<p style="color :crimson;">Sağ konumlu ToolTip</p>
<div class="tooltipright">Web Geliştirme Nedir?
<span class="toolttext">Web Geliştirme, web siteleri geliştirmek, Tek sayfa uygulamasının web sayfasını tasarlamak vb. için kullanılan bir teknolojidir.</span>
</div>
<br>
<p style="color :crimson;">Sol konumlu ToolTip</p>
<div class="tooltipleft">HTML nedir?
<span class="toolttextleft">HTML, tarayıcı için web sayfaları tasarlamaya yönelik biçimlendirme dilidir. </span>
</div>
</body>
</html>
Kodların çalışan haline bu linkten ulaşabilirsiniz.
İlk örneğimizi biraz daha özelleştireli mi?
HTML Tooltip Örnek 1 Özelleştirme
Önceki örnekte tooltip olarak span kullanmıştık. Onu div ile değiştirdim ve sağda açılan tooltipe bir liste ve strong ekledim.
<!DOCTYPE html>
<html>
<style>
p {
color: crimson;
}
body {
text-align: center;
}
/*right position*/
.tooltipright {
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 400px;
height: auto;
background-color: lightsalmon;
color: black;
border-radius: 4px;
text-align: left;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: hidden;
}
.tooltipright:hover .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft {
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 400px;
height: auto;
background-color: lightsalmon;
color: black;
border-radius: 4px;
padding: 5px;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body>
<h2>Farklı Konumlarda Tooltip</h2>
<p>Sağ konumlu ToolTip</p>
<div class="tooltipright">Web Geliştirme Nedir?
<div class="toolttext"><i><strong>Web Geliştirme</strong>
<ul>
<li>web siteleri geliştirmek</li>
<li>Tek sayfa uygulamasının web sayfasını tasarlamak</li>
<li>vb.</li>
</ul> için kullanılan bir teknolojidir.
</i>
</div>
</div>
<br>
<p>Sol konumlu ToolTip</p>
<div class="tooltipleft">HTML nedir?
<span class="toolttextleft"><i><strong>HTML</strong>, tarayıcı için web sayfaları tasarlamaya yönelik
biçimlendirme dilidir. </i></span>
</div>
</body>
</html>
Kodların çalışan haline bu linkten ulaşabilirsiniz.
HTML Tooltip Örnek 2
Bu örnekte javascript ‘te kullanıyoruz.
<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demosu Buraya tıklayın!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip, öğenin ek bilgilerini görüntülemenize yardımcı olur.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>
Kodların çalışan haline bu linkten ulaşabilirsiniz.
HTML Tooltip Örnekleri yazımızda bu kadar arkadaşlar. Diğer yazılarımızda görüşmek üzere.
HTML, CSS ve JavaScript hakkındaki diğer yazılarım için tıklayabilirsiniz. Linktree üzerinden bağlantılarıma ulaşabilirsiniz. İşte Burada. Derslerime özel olarak hazırladığım Github Projeme buradan ulaşabilirsiniz… C# Eğitim Seti eğitimi sayfasına gitmek için tıklayınız.
Discord’a katılmayı unutmayın.
Sağlıcakla ve kodla kalın….
Beğendim!
Harika!
İlginç!
Beğenmedim
