Popover Eklentisi
Popover eklenti ipuçları için benzer olduğu; kullanıcının bir eleman tıkladığında görünen bir pop-up kutusu. Fark olmasıdır popover çok fazla içerik içerebilir.
İpucu: Eklentiler (kullanarak bireysel olarak dahil edilebilir Bootstrap's bireysel "popover.js" (kullanarak veya tek seferde dosyası) "bootstrap.js" veya "bootstrap.min.js" ).
Nasıl oluşturma Popover
Bir oluşturmak için popover eklemek data-toggle="popover" bir öğeye özellik.
Kullanım title popover başlık metni belirtebilir ve kullanımı niteliğini data-content içeride görüntülenmesi gereken metni belirtmek için niteliğini popover's vücudunun:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Not: Popovers JQuery ile ilklendirilmelidir: belirtilen öğeyi seçmek ve çağrı popover() metodu.
Aşağıdaki kod tüm sağlayacak popovers belgede:
Örnek
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Kendin dene " Konumlandırma Popovers
Varsayılan olarak, popover elemanının sağ tarafında görünür.
Kullanım data-placement konumunu ayarlamak için özellik popover üst, alt, sol veya elemanın sağ tarafta:
Ö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>
Kendin dene " İpucu: Ayrıca kullanabilirsiniz data-placement değeriyle niteliği "auto" tarayıcı konumunu karar izin verir, popover . Değeri ise Örneğin, "auto left" , popover aksi sağda, mümkün olduğunda sol tarafta görüntülenir.
Kapanış Popovers
Varsayılan olarak, popover tekrar elemanı tıkladığınızda kapalıdır. Ancak, kullanabileceğiniz data-trigger="focus" kapanacak niteliğini popover elemanı dışındaki tıklandığında:
Ö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>
Kendin dene " İpucu: İsterseniz popover kullandığınız, öğenin üzerine fareyi hareket ettirdiğinizde görüntülenecek data-trigger bir özelliğin değeri "hover" :
Örnek
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Kendin dene " Tamamlayın Bootstrap Popover Referansı
Bütün tam bir referans için popover seçenekleri, yöntemler ve olaylar, bizim gidip Bootstrap JS Popover Referans .