Css ile Tooltip Yapımı

Bu yazımızda Css ile tooltip nasıl yapabiliriz onu öğreneceğiz. Tooltip dediğimiz olay aslında, bir Html etiketinin veya bir nesnenin üzerine gelindiğinde istediğimiz bilgilerin gözükmesidir.

Yazacağımız Css kodlarıyla bu mesajın, nesnenin hangi tarafında gözükeceğini belirleyebiliriz. Yani nesnenin yukarısında, sağında, aşağısında veya solunda olabilir. Dört şekilde de yapalım siz dilediğinizi kullanabilirsiniz.

4 adet button etiketi tanımlayalım ve butonların üzerine gelindiğinde tooltip mesajlarımızı gösterelim.

Tooltip Html Kodları

Tooltip Css Kodları

Tooltip Örnekleri

Burada yazdığımız kodları kısaca açıklamak gerekirse;

 ⇒  Tooltip mesajının hangi yönde görünmesini istiyorsak ona uygun kodları yazıp visibility değerini hidden yapıyoruz. 

 ⇒  Butonun üzerine gelindiğinde ise tooltip mesajının visibility değerini visible yapıyoruz.

İsterseniz tooltip mesajının görünmesini efektif olarakta gerçekleştirebilirsiniz.

Şimdi de fadeIn efekti vererek tooltip örneği yapalım.

Tooltip Html Kodları

Tooltip Css Kodları

Tooltip Örnekleri

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

Html ve Css ile Pagination (Sayfalama Butonları) Yapımı 

Yeni bir yazımda görüşmek üzere. 

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +