Css : Tooltip yapımı (ok işaretli)

Her ne kadar html elemanların tooltip özellikleri olsa da bazen kendimiz bir tooltip yapmak zorunda kalabiliriz. Bir tooltip nasıl oluşturulur inceleyelim.

1. İlk olarak bir link üretip içerisine bir resim ekledik :

---

<a id="tooltip" class="tooltip" style="visibility:hidden;" href="#" title="Kapak resmi"> 
 <img src="image/icon/kapak.png" /></a>

---

1. Bundan sonraki işlemler css tarafında yapılacak.

Tooltipimizin default css özelliklerini veriyoruz :

---

.tooltip {
color: #000000;
cursor: help;
position: absolute;
z-index:1;
width:32px !important;
height:18px !important;
}

---

Tooltipimizin üzerine geldiğimiz önce renk ve yazı ayarını yapıyoruz daha sonra yazımızın içerisinde bulunduğu alanımızı yapılandırıyoruz:

---

.tooltip:hover {
color: #c00;
text-decoration: none;
}

.tooltip:hover:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.9em;
color: #fff;
content: attr(title);
display: block;
left: 0;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}

---

Tooltip text alanını oluşturduktan sonra altına ok işareti ekleyerek şeklimizi sonlandırıyoruz.

---

.tooltip:hover:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1.5em;
content: "";
display: block;
left: 0.9em;
position: absolute;
z-index: 99;
}

---

Demo : http://jsfiddle.net/muavenet/3e7zhv9p/

Kolay Gelsin.