BOOTSTRAP 4 – POPOVER KULLANIMI

Bootstrap popover  da Bootstrap tooltip‘lere benziyor. Bir Html öğesine tıklandığında istediğimiz metinlerin açılır kutuda görüntülenmesidir. Tooltip ile aralarındaki tek fark şudur; Popover’lar ile daha fazla içerik oluşturabiliyoruz. Örneğin metnin başlığı ve metnin içeriğini ayırabiliyoruz.

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

  • Bir Html etiketi oluşturup attribute kısmına data-toggle = “popover” yazıyoruz.
  • Html etiketinin title attribute’una göstermek istediğimiz metnin başlığını yazıyoruz.
  • Html etiketinin data-content attribute’una göstermek istediğimiz metnin içeriğini 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 popover oluşturalım.

Html kodları

Görünümü

bootstrap-popover-1

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

Bunun için Html 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-popover-2 ⇒  Dikkat ettiyseniz Html öğesine tıkladığımızda popover açılıyor, tekrar öğeye tıkladığımızda popover kapanıyor.

Eğer Html öğesine değil de herhangi bir yere tıkladığınızda popover’ın kapanmasını istiyorsanız attribute kısmına data-trigger = “focus” yazmalısınız.

 ⇒  Eğer Html öğesine tıklayarak değil de hover olayıyla yani fareyi öğenin üzerine getirdiğimizde popover’ın açılmasını istiyorsanız attribute kısmına data-trigger = “hover” yazmalısınız.

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

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

Leave a Reply