Css ile Tooltip Yapımı

Merhaba Arkadaşlar,
Bu makalede, 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.

Dört adet <button> tanımlayalım ve butonların üzerine gelindiğinde tooltip mesajlarımızı gösterelim.Burda 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 css ile visibility değerini hiddenyapıyoruz.Buton’ un üzerine gelindiğinde ise tooltip mesajının visibility değerini visibleyapıyoruz.Uygulamayı incelediğinizde daha anlaşılır olacaktır.Kodlarımız şu şekilde;

İsterseniz tooltip mesajının görünmesini efektif olarakda gerçekleştirebilirsiniz.FadeIn efekti vererek şu şekilde yapabilirsiniz;

Css ile Buton Yapımı ve  Css ile Pagination Yapımı makaleleride ilginizi çekebilir.

Yeni bir makalede görüşmek üzere. 

Leave a Reply

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