BS5 popover
Popoverlar
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.
Popover qanday yaratiladi
Popover yaratish uchun elementga data-bs-toggle="popover" atributini qo‘shing.
Popover sarlavhasi matnini belgilash uchun title atributidan, popover tanasi (body) ichida ko‘rsatiladigan matnni belgilash uchun esa data-bs-content atributidan foydalaning:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>
Eslatma: Popoverlar ishlashi uchun ular JavaScript yordamida ishga tushirilishi (initsializatsiya qilinishi) kerak.
Quyidagi kod hujjatdagi barcha popoverlarni faollashtiradi:
Misol
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</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-bs-placement atributidan foydalaning:
Misol
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</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-bs-trigger="focus" atributidan foydalanishingiz mumkin:
Misol
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
O‘zingiz sinab ko‘ring »
Hover orqali ochiladigan popover
Maslahat: Agar popover sichqoncha kursorini element ustiga olib borganingizda ko‘rsatilishini istasangiz, data-bs-trigger atributidan "hover" qiymati bilan foydalaning:
Misol
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!