و Popover المساعد
و Popover المساعد يشبه تلميحات. وهو مربع المنبثقة التي تظهر عندما ينقر المستخدم على عنصر. والفرق هو أن popover يمكن أن تحتوي على أكثر من ذلك بكثير المحتوى.
نصيحة: الإضافات يمكن تضمينها بشكل فردي (باستخدام Bootstrap's فرد "popover.js" ملف)، أو في كل مرة (باستخدام "bootstrap.js" أو "bootstrap.min.js" ).
كيفية إنشاء Popover
لإنشاء popover ، إضافة data-toggle="popover" السمة إلى عنصر.
استخدام title سمة لتحديد نص رأس بوبوفير، واستخدام data-content السمة لتحديد النص الذي يجب عرضه داخل popover's الجسم:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> ملاحظة: Popovers يجب تهيئة مع مسج: اختيار العنصر المحدد واستدعاء popover() الأسلوب.
سوف التعليمة البرمجية التالية تمكين جميع popovers في الوثيقة:
مثال
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
انها محاولة لنفسك » المواقع Popovers
افتراضيا، popover سوف تظهر على الجانب الأيمن من العنصر.
استخدام data-placement السمة لتحديد موقف popover على أعلى، أسفل، يسار أو يمين العنصر:
مثال
<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>
انها محاولة لنفسك » نصيحة: يمكنك أيضا استخدام السمة وضع البيانات مع قيمة "auto" ، والتي سوف تسمح للمتصفح أن يقرر موقف popover . على سبيل المثال، إذا كانت القيمة "auto left" ، و popover سيعرض على الجانب الأيسر عندما يكون ذلك ممكنا، وإلا على اليمين.
إغلاق Popovers
افتراضيا، popover يغلق عند النقر على العنصر مرة أخرى. ومع ذلك، يمكنك استخدام data-trigger="focus" السمة التي سيتم إغلاق popover عند النقر خارج العنصر:
مثال
<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>
انها محاولة لنفسك » نصيحة: إذا كنت ترغب في popover للظهور عند تحريك مؤشر الماوس فوق العنصر، استخدم data-trigger السمة بقيمة "hover" :
مثال
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
انها محاولة لنفسك » استكمال Bootstrap Popover المرجعي
للإشارة كاملة لجميع popover الخيارات والأساليب والأحداث، انتقل إلى لدينا Bootstrap شبيبة Popover المرجعي .