BS popover
Popover plagini
Popover plagini tooltiplarga o‘xshaydi: bu foydalanuvchi element ustiga bosganda paydo bo‘ladigan qalqib chiquvchi oyna. Farqi shundaki, popover ancha ko‘proq kontentni o‘z ichiga olishi mumkin.
Maslahat: Plaginlarni alohida (Bootstrap’ning alohida "popover.js" faylidan foydalanib) yoki hammasini birdaniga ("bootstrap.js" yoki "bootstrap.min.js" orqali) ulash mumkin.
Popover 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: Popoverlar jQuery yordamida ishga tushirilishi (initialize) shart: 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 »
Maslahat: data-placement atributidan "auto" qiymati bilan ham foydalanishingiz mumkin — bunda popover joylashuvini brauzerning o‘zi hal qiladi. Masalan, qiymat "auto left" bo‘lsa, popover imkon bo‘lganda chap tomonda, aks holda o‘ng tomonda 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 popoverlari bo‘yicha to‘liq ma’lumotnoma
Popoverlarning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Popover ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!