Tooltip’ i kullanmaya başladığımda jQuery ‘i yeni yeni tanımaya başlamıştım. jQuery kütüphanesi kullanılarak üretilmiş birçok Tooltip örneği bulabilirsiniz. Peki Tooltip ne midir?
Tooltip, HTML içerisinde kullanılan bir <a> elementinin title özelliği ile aynı işlevi görür. Yani linkin üzerine geldiğinizde tarayıcınız tarafından title özelliğine atanmış metin görülür. Aslında buradaki kısıtlamayı görmemek imkansız. Linkin üzerin geldiğimizde sade bir metin gösterildiği halde neden resim veya biçimlendirilmiş metinler kullanamıyoruz? İşte bu nokta geliştiriciler jQuery kütüphanesi ile tooltip uygulamasını geliştirmişler. Mantık olarak bağlantının üzerine geldiğinizde, görünmez durumdaki bir HTML (genellikle bir div veya span) elemanının içeriği ekranda beliriyor. Çeşitli efektler kullanarak görselleştirilen tooltip uygulamalarını, sadece CSS kullanarak da yapmak mümkün.
CrossBrowser Nedir?
Crossborwser, çapraz tarayıcı desteği demektir. Web tabanlı uygulamaların her taraycıda çalışacak şekilde üretilme zorunluluğu böyle bir ihtiyacı ortaya çıkarmıştır. Örneğin yazdığınız CSS veya javascript gibi client tarafında çalışan dillerin, en azından en popüler tarayıcılarda çalışacak biçimde yazılması önemlidir. Crossbrowser desteğini sağlamak, bir web developer veya web master için önemlidir. Dünya piyasasında, en az bir sürümü yer almış tarayıcıların listesini şuradan görebilirsiniz. Browser list in the world – http://browsers.evolt.org/
Crossbrowser desteğini sağlayacak bir CSS tooltip için aşağıdaki CSS ve HTML kodlarını kullanmanız yeterlidir. Kısaca mantığı da açıklamak gerekirse, a elemanı içindeki span elementi görünmez durumda iken :hover olayı için görünür duruma getiriliyor. Çalıştırmak için CSS kodlarını, sayfanızın <head> … </head> tagları arasına <style type=”text/css”> … </style> içinde kalacak çekilde yazın. HTML kodlarını <body> elemanı içinde yazdıktan sonra Tooltip hazırdır.
a:hover {
background:#ffffff;
text-decoration:none;
} /*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
Easy Tooltip This is the crazy little Easy Tooltip Text. .
jQuery Tooltip Örnekleri
http://www.kollermedia.at/archive/2007/04/09/list-of-25-javascriptajax-css-tooltip-scripts/
http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
Kaynaklar:
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
I graduaded from Gazi University, CEIT Department in 2009. Now i am a grad student in the same department of the institue of education. I'm interested in Photoshop CS3 and CSS in web development. also i am a bit concerned with Corel, Indesign and vectorel design. Now work as an expert in the University of Gazi.
