Önyükleme Popover Eklentisi
Popover Eklentisi
Popover eklentisi 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.
İpucu: Eklentiler tek tek (Bootstrap'in bireysel "popover.js" dosyası kullanılarak) veya tümü bir kerede ("bootstrap.js" veya "bootstrap.min.js" kullanılarak) dahil edilebilir.
Popover 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ştirecektir:
Ö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>
İpucu: Veri yerleştirme özelliğini "otomatik" değeriyle de kullanabilirsiniz; bu, tarayıcının açılır pencerenin konumuna karar vermesine olanak tanır. Örneğin, değer "otomatik sola" ise, açılır pencere mümkün olduğunda sol tarafta, aksi takdirde sağda 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 .