في هذا الدرس 3تصفّح المواضيع
ال Popover وهو صندوق خافت مثل ال tooltips يظهر اعلي النصوص ليوضح معلومات اضافية وتفصيلية باستخدام ال Bootstrap
طريقة انشاء ال Popover
- قم بإضافة ال data-toggle attribute متبوعاً ب tooltip value لأي Element
- قم بإضافة ال title attribute متبوعاً ب النص الذي تريد إظهاره عند تمرير زر ال mouse بداخل ال value لنفس ال Element
- قم بإضافة ال data-content attribute متبوعاً ب النص الزي تريد إظهاره عند تمرير زر ال mouse بداخل ال value لنفس ال Element
- قم بإضافة ال jquery method قبل نهاية ال bode close tg
HTML
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
HTML
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>في الوضع الافتراضي يظهر ال Popovers من اعلي ال Element يمكنك تغيير وضعية اظهار ال Popovers من اي اتجاه باستخدام ال data-placement attribute ونكتب بداخل ال value اي من القيم التالية top, bottom, left, right
HTML
<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>في الوضع الافتراضي ، يتم إغلاق النافذة Popover عند النقر فوق العنصر مرة أخرى ، يمكنك استخدام السمة data-trigger = focus التي ستغلق النافذة عند النقر خارج العنصر
HTML
<a href="#" tabindex="0" role="button" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
HTML
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.