Ali's Surprisingly Web

Ali's Alltop

CheckBoxList'e Hover Tooltip

asp.net, checkboxlist, css, hover, tooltip Add comments

Bir ASP.NET projemizde, CheckBoxList içerisindeki her bir işaret kutusunun açıklamasının mouse işaret kutusu üzerine geldiğinde tooltip olarak çıkması yönünde bir ihtiyaç başgösterdi. Teknik olarak CheckBoxList içerisindeki her bir kayda ayrı ayrı standart tooltip vermek mümkün değil.

Aklımıza gelen ve sırayla uyguladığımız üç çözüm seçeneği şunlar oldu:

CheckBoxList kullanımından vazgeçip, alanı repeater'a çevirmek istediğimiz gibi özgür olmak.
Bir javascript array içerisinde ilgili açıklamaları ve ID'leri tutup, sayfa yüklendiğinde prototype.js ile (projede prototype kullanılıyor) bunları tooltip'e çevirmek.
Soruna bir CSS yaklaşımı ile çözüm aramak.

İlk seçeneği, projenin bulunduğu durum, bu checklist'in sayfada ve codebehind'da kullanım durumu vs. göz önünde bulunarak ilk etapta eledik. Ardından ikinci çözüm için çalışmaya başladık ve bu çözümü gerçekleştirdik. Ancak sayfada bu işlemin uygulanacağı çok fazla sayıda checkbox olduğu için (yaklaşık 1000 adet) çözüm istediğimiz performansı sağlamadı. Sayfanın açılışı, JS çalışmasından dolayı 10 saniye kadar yavaşladı.

İki başarısız girişimden sonra CSS seçeneğini değerlendirmeye başladık. Asıl yazı amacıma yavaş yavaş yaklaşıyoruz. Burada isteğimizi gerçekleştirmek için 3-5 satırlık bir CSS yeterli oldu. Sonuçta elde ettiğimiz çıktı, CheckBoxList kullanılan her yerde kullanılabilecek bir çözüm oldu. Tek ön koşul var: CheckBoxList'teki her bir nesnenin açıklamasının normalde görüntülenmiyor olması. Örnek olarak şu görüntüye bakabilirsiniz:

Eğer checkboxların açıklamaları buradaki gibi görünmüyorsa, bunları tooltip olarak değerlendirebiliriz. Checkboxlist'i normal şekilde bind ediyoruz. Bu durumda görüntü şu şekilde oluyor:

İlk önce checkboxlist'imize bir class atıyoruz (.NET tarafından CssClass). Örneğin bu class chkOptionHover olsun. Şu şekilde bir style ekliyoruz:

table.chkOptionHover td label
{
display:none;
}

Bu sayede checkboxlistteki her bir checkbox'a ait açıklamalar görünmez hale geliyor. Bir önceki style'da belirttiğimiz td'nin hover'ına bir class daha vererek üzerine geldiğimizde açıklamaların görünmesini sağlıyoruz.

table.chkOptionHover td:hover label
{
position:absolute;
display:block;
}

Belirttiğim style eklendikten sonra mouse over efekti şu duruma geliyor:

Her ne kadar görsel olarak kullanılabilir olmasa da isteğimiz aslında teknik olarak gerçekleşmiş durumda. Bir kaç küçük CSS dokunuşu ile label'larımızı gerçek birer tooltip'e döndürüyoruz. Bunun için sadece :hover class'ına bazı eklemeler yapıyoruz. Tabi ki istediğiniz şekilde görsel oluşturabilirsiniz. Bu benim tercihim:

table.chkOptionHover td:hover label
{
font-size:10pt;
font-weight:bold;
padding:5px;
position:absolute;
background-color:yellow;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

Yukarıdaki uygulamalardan sonra artık tooltip'imiz oturmuş duruma geliyor ve aşağıdaki gibi bir görüntü oluşuyor:

Gerçek bir tooltip'e benziyor değil mi? Uygularken Checklist'e class verip yukarıdaki satırları eklemek dışında da bir geliştirme gerektirmiyor. Ön koşulların sağlandığı durumlarda oldukça uygulanabilir bir çözüm olduğunu düşünüyorum. Ayrıca IE, Firefox ve Chrome (webkit) uyumlu olarak çalışıyor. Tarayıcıdan tarayıcıya tooltiplerin konumları değişebiliyor, ancak hepsi kabul edilebilir sınırlar içerisinde kalıyor. Arzuya göre genişlik de belirterek daha tooltip-benzer bir görüntü de elde edilebilir. Ötesi CSS yeteneklerinize kalmış...

Umarım sizin de işinize yarar...