BS4 popover
Bootstrap 4 popover
Popover komponenti tooltiplarga o‘xshaydi; u foydalanuvchi element ustiga bosganda paydo bo‘ladigan qalqib chiquvchi oynadir. Farqi shundaki, popover ancha ko‘proq kontentni o‘z ichiga olishi mumkin.
Toggle popoverPopover qanday yaratiladi
Popover yaratish uchun elementga data-toggle="popover" atributini qo‘shing.
Popover sarlavhasi matnini belgilash uchun title atributidan, popover tanasi (body) ichida ko‘rsatiladigan matnni belgilash uchun esa data-content atributidan foydalaning:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Eslatma: Popoverlarni jQuery yordamida ishga tushirish (initsializatsiya qilish) kerak: kerakli elementni tanlang va popover() metodini chaqiring.
Quyidagi kod hujjatdagi barcha popoverlarni faollashtiradi:
Misol
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
O‘zingiz sinab ko‘ring »
Popoverlarni joylashtirish
Standart holatda popover elementning o‘ng tomonida paydo bo‘ladi.
Popoverni elementning tepasi, pasti, chap yoki o‘ng tomonida joylashtirish uchun data-placement atributidan foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
Eslatma: Agar joylashtirish uchun yetarli joy bo‘lmasa, joylashuv atributlari siz kutgandek ishlamaydi. Masalan, sahifaning eng yuqori qismida top joylashuvidan foydalansangiz (u yerda popover uchun joy yo‘q), popover buning o‘rniga element ostida yoki o‘ng tomonida (qayerda joy bo‘lsa, o‘sha yerda) ko‘rsatiladi.
Popoverlarni yopish
Standart holatda popover element ustiga yana bosilganda yopiladi. Biroq element tashqarisiga bosilganda popoverni yopadigan data-trigger="focus" atributidan foydalanishingiz mumkin:
Misol
<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>
O‘zingiz sinab ko‘ring »
Maslahat: Agar popover sichqoncha kursorini element ustiga olib borganingizda ko‘rsatilishini istasangiz, data-trigger atributidan "hover" qiymati bilan foydalaning:
Misol
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
O‘zingiz sinab ko‘ring »
Bootstrap Popover bo‘yicha to‘liq ma’lumotnoma
Barcha popover parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap JS Popover ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!