Önyükleme 4 Popover
Önyükleme 4 Popover
Popover bileşeni, araç ipuçlarına benzer; kullanıcı bir öğeye tıkladığında görünen bir açılır kutudur. Aradaki fark, popover'ın çok daha fazla içerik içerebilmesidir.
Aç/KapatPopover Nasıl Oluşturulur
Popover oluşturmak için, data-toggle="popover"
niteliği bir öğeye ekleyin.
titlePopover'ın başlık metnini belirtmek için özniteliği kullanın ve popover'ın data-contentgövdesi içinde görüntülenmesi gereken metni belirtmek için özniteliği kullanın:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Not: Popover'lar jQuery ile başlatılmalıdır: belirtilen öğeyi seçin ve popover()yöntemi çağırın.
Aşağıdaki kod, belgedeki tüm açılır pencereleri etkinleştirir:
Örnek
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popover'ları Konumlandırma
Varsayılan olarak, açılır öğe öğenin sağ tarafında görünecektir.
data-placementPopover'ın konumunu öğenin üstünde, altında, solunda veya sağında ayarlamak için özniteliği kullanın :
Örnek
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Not: Yerleşim özellikleri, onlar için yeterli yer yoksa beklediğiniz gibi çalışmaz. Örneğin: bir sayfanın üst kısmındaki en üstteki yerleşimi kullanırsanız (bunun için yer olmadığı yerde), bunun yerine öğenin altında veya sağında (nerede yer varsa) açılır pencere görüntülenir.
Popover'ları Kapatmak
Varsayılan olarak, öğeye tekrar tıkladığınızda açılır pencere kapanır. Ancak, data-trigger="focus"öğenin dışına tıkladığınızda açılır pencereyi kapatacak özelliği kullanabilirsiniz:
Örnek
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
İpucu: Fare imlecini öğenin üzerine getirdiğinizde açılır öğenin görüntülenmesini istiyorsanız, data-trigger"hover" değeriyle özniteliği kullanın:
Örnek
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Bootstrap Popover Referansını Tamamlayın
Tüm açılır seçeneklerin, yöntemlerin ve olayların eksiksiz bir referansı için Bootstrap JS Popover Referansımıza gidin .