Css data ile tooltip yapma

Css data ile tooltip yapma

  • 16 Mart 2014
  • 7 Okunma
  • 2 Yorum
  • 4 DK

Artık bir çok şeyi javascript olmadan css ile de yapabiliyoruz. Mesela şimdi göstereceğim tooltip de bu şeylerden bir tanesi. ilk önce ilk defa tooltip kelimesini duyanlar için tooltipi açıklayayım bazen bir linkin üzerine gelince veya bir yazının üstüne gelince bir uyarı penceresinin çıkmasıdır aşağıda da resimde örnek olarak gösterdim.

css tooltip dataYukarıdaki resmi blog konusu sitesinden aldım bizzat orada uygulamadım. İsterseniz zaman girip görebilirsiniz.

Şimdi tooltipi öğrendiğimize göre bunun normalde nasıl şimdi nasıl yapılacağını açıklayayım normalde bu özelliği kullanmak için jQuery ui aracını veya farklı javascriptler kullanarak yapabiliyoruz ama gelişen teknoloji ile bunu artık csslede çok basit bir biçimde yapabiliyoruz böylelikle sitenizde javascript az olduğu için hem hızlı açılma hemde tootlipin tasarımını istediğiniz gibi ayarlama ayrıcalığını kavuşmuş oluyorsunuz 😀

Hemen kodlarımıza geçelim

ilk önce htmlden başlıyoruz tooltipin çıkmasını istediğiniz html etiketinin içerisine şu örnekteki gibi özel data parametremizi giriyoruz

 <div class="divadi" tooltip="Tooltipde çıkacak yazı"></div>

Gördüğünüz gibi normalde tooltip parametresi html kurallarına göre yok ama biz html5 ile gelen data seçici kullanarak kendimize ait bir etiket parametresi oluşturabiliyoruz yani oradaki “tooltip” adı “hasan” veya “aciklamayazisi” gibi de olabilir. Şimdi Sıra CSS de

[tooltip]:hover:after{ content: attr(tooltip); text-align:center; position: relative; width: 150px; padding: 5px; font-size: 12px; background: #000; color: #fff;top: -28px; float: left; left: -72px; border-radius: 3px; }

Yukarıdaki css komutunu direk css nize eklerseniz en yukarıdaki resim deki görüntü çıkacaktır. Siz istediğiniz gibi düzenleyebilirsiniz tabi.

ÖRNEK : Result tabını seçerek görebilirsiniz

HAYATI KODLA'YA ABONE OLUN!!
ETKİLEYİCİ BİR YORUM BIRAK

Css data ile tooltip yapma İle Benzer Yazılar

"Css data ile tooltip yapma" Yazısına uygun diğer makalerler