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.
Farklı bir yazımda görüşmek üzere.
hocam ben yapıyorum bunları ama olmuyor jqery de ekledim neden olmuyor olabilir
Kodunuzu paylaşabilirseniz yardımcı olabilirim.