BOOTSTRAP 4 – POPOVER KULLANIMI

[Fauda]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

BOOTSTRAP 4 – POPOVER KULLANIMI

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.

1 2 3 4 5

$(document).ready(function(){ $('[data-toggle="popover"]').popover(); });

Ö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ı

1 2 3

<a href="#" data-toggle="popover" title="Başlık buraya yazılacak" data-content="İçerik buraya yazılacak">Popover</a>

Görünümü

⇒ 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ı

1 2 3 4 5 6

<a href="#" data-toggle="popover" title="Başlık buraya yazılacak" data-content="İçerik buraya yazılacak" data-placement="top">Popover</a> <a href="#" data-toggle="popover" title="Başlık buraya yazılacak" data-content="İçerik buraya yazılacak" data-placement="right">Popover</a> <a href="#" data-toggle="popover" title="Başlık buraya yazılacak" data-content="İçerik buraya yazılacak" data-placement="bottom">Popover</a> <a href="#" data-toggle="popover" title="Başlık buraya yazılacak" data-content="İçerik buraya yazılacak" data-placement="left">Popover</a>

Görünümü

⇒ 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.

1 2 3

<a href="#" title="Başlık buraya yazılacak" data-toggle="popover" data-trigger="focus" data-content="İçerik buraya yazılacak">Popover</a>

⇒ 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.

1 2 3

<a href="#" title="Başlık buraya yazılacak" data-toggle="popover" data-trigger="hover" data-content="İçerik buraya yazılacak">Popover</a>

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

 

[Replicant]

Paylaşım için teşekkürler.

 

[Fauda]

Rıca ederim