BOOTSTRAP 4 – TOOLTIP (BOOTSTRAP ARAÇ İPUCU)

Bootstrap tooltip kullanarak çok kısa sürede sade ve şık araç ipuçları oluşturabiliriz. Tooltip, bir öğenin üzerine mouse ile gelindiğinde istediğimiz bilgilerin açılır bir kutu ile gösterilmesi diyebiliriz. Css kodları yazarak da istediğimiz araç ipuçlarını oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim.

Css ile nasıl tooltip yapılır öğrenmek istiyorsanız Css ile Tooltip Yapımı yazımı okuyabilirsiniz.

 ⇒  Bootstrap tooltip oluşturmak için yapmamız gerekenler:

  • Bir <a> etiketi oluşturup attribute kısmına data-toggle = “tooltip” yazıyoruz.
  • <a> etiketinin title attribute’una göstermek istediğimiz metni yazıyoruz.
  • Son olarak aşağıdaki jquery kodlarını sayfamıza ekliyoruz. 

 Önemli  Bu kodların Jquery’i projemize dahil ettiğimiz script linkinden sonra yazıldığından emin olun. Aksi halde bu kodlarınız çalışmayacaktır.

Şimdi en basit haliyle bir bootstrap tooltip oluşturalım.

Html kodları

Görünümü

bootstrap-tooltip 

 ⇒  Varsayılan olarak tooltip metni nesnenin üzerinde görüntüleniyor. İstersek bunu nesnenin sağında, solunda veya aşağısında da gösterebiliriz.

Bunun için <a> etiketinin data-placement attribute’una şu değerleri verebiliyoruz.

  • top
  • right
  • bottom
  • left

Bunları da örnek üzerinde görelim.

Html kodları

Görünümü

bootstrap-tooltip-kullanimi

Umarım sizin için faydalı bir yazı olmuştur.  

Farklı bir yazımda görüşmek üzere.

Leave a Reply

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