JS Tooltip

Tooltip — foydalanuvchi sichqoncha kursorini element ustiga olib borganda paydo bo‘ladigan kichik qalqib chiquvchi oyna.

Tooltiplar haqidagi darslik uchun Bootstrap tooltip darsligimizni o‘qing.

data-* atributlari orqali

data-toggle="tooltip" tooltipni faollashtiradi.

title atributi tooltip ichida ko‘rsatiladigan matnni belgilaydi.

Misol

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

O‘zingiz sinab ko‘ring »

JavaScript orqali

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

Misol

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

O‘zingiz sinab ko‘ring »

Tooltip 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	Tooltipni ko‘rsatish va yashirishda 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	Tooltipni muayyan elementga biriktiradi. Misol: container: 'body'	Sinab ko‘ring
delay	number yoki object	0	Tooltipni ko‘rsatish va yashirish uchun ketadigan millisekundlar sonini belgilaydi. Ko‘rsatish va yashirish uchun alohida kechikish belgilash uchun obyekt tuzilmasidan foydalaning: delay: {show: 500, hide: 100} — bunda tooltipni ko‘rsatish 500 ms, yashirish esa atigi 100 ms oladi	Sinab ko‘ring
html	boolean	false	Tooltipda 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	"top"	Tooltip joylashuvini belgilaydi. Mumkin bo‘lgan qiymatlar: "top" — tooltip tepada "bottom" — tooltip pastda "left" — tooltip chapda "right" — tooltip o‘ngda "auto" — tooltip joylashuvini brauzerning o‘zi hal qiladi. Masalan, qiymat "auto left" bo‘lsa, tooltip imkon bo‘lganda chap tomonda, aks holda o‘ng tomonda ko‘rsatiladi. Qiymat "auto bottom" bo‘lsa, tooltip imkon bo‘lganda pastda, aks holda tepada ko‘rsatiladi	Sinab ko‘ring
selector	string yoki boolean false	false	Tooltipni ko‘rsatilgan selektorga qo‘shadi	Sinab ko‘ring
template	string		Tooltipni yaratishda ishlatiladigan asosiy HTML. Tooltip sarlavhasi .tooltip-inner klassiga ega elementga joylashtiriladi, .tooltip-arrow klassiga ega element esa tooltipning strelkasiga aylanadi. Eng tashqi o‘rovchi element .tooltip klassiga ega bo‘lishi kerak.
title	string	""	Tooltip ichida ko‘rsatiladigan matnni belgilaydi	Sinab ko‘ring
trigger	string	"hover focus"	Tooltip qanday ishga tushirilishini belgilaydi. Mumkin bo‘lgan qiymatlar: "click" — tooltip bosish orqali ishga tushiriladi "hover" — tooltip sichqoncha ustiga olib borilganda ishga tushiriladi "focus" — tooltip fokus olganda ishga tushiriladi (masalan, Tab tugmasi yoki bosish orqali) "manual" — tooltip qo‘lda ishga tushiriladi Maslahat: Bir nechta qiymat uzatish uchun ularni probel bilan ajrating	Sinab ko‘ring
offset	number yoki string	0	Tooltipning maqsadli elementga nisbatan siljishi (offset)
fallbackPlacement	string yoki massiv (array)	"flip"	Zaxira (fallback) holatida Popper qaysi joylashuvdan foydalanishini belgilaydi
boundary	string yoki element	"scrollParent"	Tooltipning toshib chiqish (overflow) cheklov chegarasi. "viewport", "window" yoki "scrollParent" qiymatlarini yoki HTML elementni qabul qiladi

Tooltip metodlari

Quyidagi jadvalda barcha mavjud tooltip metodlari keltirilgan.

Metod	Tavsif	Sinab ko‘ring
.tooltip(options)	Tooltipni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang	Sinab ko‘ring
.tooltip("show")	Tooltipni ko‘rsatadi	Sinab ko‘ring
.tooltip("hide")	Tooltipni yashiradi	Sinab ko‘ring
.tooltip("toggle")	Tooltipni ko‘rsatadi/yashiradi (toggle)	Sinab ko‘ring
.tooltip("dispose")	Tooltipni yashiradi va yo‘q qiladi	Sinab ko‘ring

Tooltip hodisalari (events)

Quyidagi jadvalda barcha mavjud tooltip hodisalari keltirilgan.

Hodisa	Tavsif	Sinab ko‘ring
show.bs.tooltip	Tooltip ko‘rsatilish arafasida yuz beradi	Sinab ko‘ring
shown.bs.tooltip	Tooltip to‘liq ko‘rsatilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring
hide.bs.tooltip	Tooltip yashirilish arafasida yuz beradi	Sinab ko‘ring
hidden.bs.tooltip	Tooltip to‘liq yashirilganda yuz beradi (CSS o‘tishlari tugagandan keyin)	Sinab ko‘ring

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish