انتقل إلى محتوى الدرس
فقرة فرعية #2 من درس: Bootstrap 4 Popover

Positioning Popovers

ستتعلم في هذا الدرس عمل ال Popover وهو صندوق خافت مثل ال tooltips يظهر اعلي النصوص ليوضح معلومات اضافية وتفصيلية باستخدام ال Bootstrap

1 صفوف تعليمية
Bootstrap
2,305 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في الوضع الافتراضي يظهر ال 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>

جميع فقرات هذا الدرس (Bootstrap 4 Popover)