CSS3 ile Tooltip Nasıl Yapılır ?
CSS3 ile Tooltip Nasıl Yapılır ?
CSS3′ün hayatımıza girmesiyle birlikte, artık javascript’e ihtiyaç duymadan bazı şeyleri yapmaya başladık. Bunlardan bir tanesi de ‘Tooltip’ uygulamaları. Tooltip için, bir linkin veya elementin üstüne geldiğimizde (genellikle link), elemanın üstünde oluşan, bilgi veren bir kabacık(kutu) diyebiliriz.
Öncelikle böyle bir uygulamanın CSS ile nasıl bir algoritma izleyerek yapabileceğimizi anlatacağım.
Genelde tooltip içerisinde linkin sahip olduğu “title” değeri gösterilir. Bunun için css ile tooltip içerisinde content kullanacağız ve title’yi basacağız.
Linkin hover elementinde, :after ve :before seçicilerini kullanacağız. After ile Tooltip’in genel özelliklerini belirteceğiz. Örneğin; genişlik, arkaplan, renk, content, padding ve pozisyon değerlerini belirleyeceğiz.
Before’da ise tooltip’lerde o altta gördüğümüz ufak ikonu imaj kullanmadan oluşturağız. Bunun için border kullanacağız.
CSS3 ile Tooltip Nasıl Yapılır ?