JS 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.

Popoverlar haqidagi darslik uchun Bootstrap popover darsligimizni o‘qing.

data-* atributlari orqali faollashtirish

data-toggle="popover" popoverni faollashtiradi.

title atributi popover sarlavhasi matnini belgilaydi.

data-content atributi popover tanasi (body) ichida ko‘rsatiladigan matnni belgilaydi.

Misol

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

O‘zingiz sinab ko‘ring »

JavaScript orqali

Popoverlar faqat CSS’dan iborat plaginlar emas, shuning uchun ularni jQuery yordamida ishga tushirish (initsializatsiya qilish) kerak: kerakli elementni tanlang va popover() metodini chaqiring.

Misol

// Select all elements with data-toggle="popover" in the document $('[data-toggle="popover"]').popover(); // Select a specified element $('#myPopover').popover();

O‘zingiz sinab ko‘ring »

Popover parametrlari (options)

Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-placement="".

Nomi	Turi	Standart	Tavsif	Sinab ko‘ring
animation	boolean	true	Popoverni ochish va yopishda CSS fade (asta-sekin paydo bo‘lish/yo‘qolish) o‘tish effektini qo‘shish kerakligini belgilaydi true — fade effektini qo‘shadi false — fade effektini qo‘shmaydi	Sinab ko‘ring
container	string yoki boolean false	false	Popoverni muayyan elementga biriktiradi. Misol: container: 'body'	Sinab ko‘ring
content	string	""	Popover tanasi (body) ichidagi matnni belgilaydi	Sinab ko‘ring
delay	number yoki object	0	Popoverni ochish va yopish uchun ketadigan millisekundlar sonini belgilaydi. Ochish va yopish uchun alohida kechikish belgilash uchun obyekt tuzilmasidan foydalaning: delay: {show: 500, hide: 100} — bunda popoverni ochish 500 ms, yopish esa atigi 100 ms oladi	Sinab ko‘ring
html	boolean	false	Popoverda HTML teglarini qabul qilish kerakligini belgilaydi: true — HTML teglarini qabul qiladi false — HTML teglarini qabul qilmaydi Eslatma: HTML title atributiga (yoki title parametri orqali) joylashtirilishi kerak. Qiymat false bo‘lganda (standart), jQuery’ning text() metodidan foydalaniladi. Agar XSS hujumlaridan xavotirda bo‘lsangiz, shundan foydalaning	Sinab ko‘ring
placement	string	"right"	Popover joylashuvini belgilaydi. Mumkin bo‘lgan qiymatlar: "top" — popover tepada "bottom" — popover pastda "left" — popover chapda "right" — popover o‘ngda "auto" — 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. Qiymat "auto bottom" bo‘lsa, popover imkon bo‘lganda pastda, aks holda tepada ko‘rsatiladi	Sinab ko‘ring
selector	string yoki boolean false	false	Popoverni ko‘rsatilgan selektorga qo‘shadi	Sinab ko‘ring
template	string		Popoverni yaratishda ishlatiladigan asosiy HTML. Popover sarlavhasi .popover-header ichiga joylashtiriladi. Popover kontenti .popover-body ichiga joylashtiriladi. .arrow popoverning strelkasiga aylanadi. Eng tashqi o‘rovchi element .popover klassiga ega bo‘lishi kerak.
title	string	""	Popover sarlavhasi matnini belgilaydi	Sinab ko‘ring
trigger	string	"click"	Popover qanday ishga tushirilishini belgilaydi. Mumkin bo‘lgan qiymatlar: "click" — popover bosish orqali ishga tushiriladi "hover" — popover sichqoncha ustiga olib borilganda ishga tushiriladi "focus" — popover fokus olganda ishga tushiriladi (masalan, Tab tugmasi yoki bosish orqali) "manual" — popover qo‘lda ishga tushiriladi Maslahat: Bir nechta qiymat uzatish uchun ularni probel bilan ajrating	Sinab ko‘ring
offset	number yoki string	0	Popoverning maqsadli elementga nisbatan siljishi (offset)
fallbackPlacement	string yoki massiv (array)	"flip"	Zaxira (fallback) holatida Popper qaysi joylashuvdan foydalanishini belgilaydi
boundary	string yoki element	"scrollParent"	Popoverning toshib chiqish (overflow) cheklov chegarasi. "viewport", "window" yoki "scrollParent" qiymatlarini yoki HTML elementni qabul qiladi

Popover metodlari

Quyidagi jadvalda barcha mavjud popover metodlari keltirilgan.

Metod	Tavsif	Sinab ko‘ring
.popover(options)	Popoverni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang	Sinab ko‘ring
.popover("show")	Popoverni ko‘rsatadi	Sinab ko‘ring
.popover("hide")	Popoverni yashiradi	Sinab ko‘ring
.popover("toggle")	Popoverni ko‘rsatadi/yashiradi (toggle)	Sinab ko‘ring
.popover("dispose")	Popoverni yashiradi va yo‘q qiladi	Sinab ko‘ring
.popover("enable")	Popoverning ko‘rsatilish imkoniyatini yoqadi. Bu standart holat
.popover("disable")	Popoverni ko‘rsatish imkoniyatini o‘chiradi. Popover faqat qayta yoqilgandan keyingina ko‘rsatilishi mumkin
.popover("toggleEnabled")	Popoverning ko‘rsatilish yoki yashirilish imkoniyatini almashtiradi (toggle)
.popover("update")	Popover joylashuvini yangilaydi

Popover hodisalari (events)

Quyidagi jadvalda barcha mavjud popover hodisalari keltirilgan.

Hodisa	Tavsif	Sinab ko‘ring
show.bs.popover	Popover ko‘rsatilish arafasida yuz beradi	Sinab ko‘ring
shown.bs.popover	Popover to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring
hide.bs.popover	Popover yashirilish arafasida yuz beradi	Sinab ko‘ring
hidden.bs.popover	Popover to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring
inserted.bs.popover	show.bs.popover hodisasidan keyin, popover shabloni DOM’ga qo‘shilganda yuz beradi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish