Maslahat
Animatsiyalar uchun CSS3 va mahalliy sarlavhalarni saqlash uchun ma'lumotlar atributlaridan foydalangan holda CSS va JavaScript bilan maxsus Bootstrap maslahatlarini qo'shish uchun hujjatlar va misollar.
Umumiy koʻrinish
Maslahat plaginidan foydalanganda bilishingiz kerak bo'lgan narsalar:
- Maslahatlar joylashishni aniqlash uchun uchinchi tomon kutubxonasi Popperga tayanadi . Maslahatlar ishlashi uchun bootstrap.js dan oldin popper.min.js ni qo'shishingiz yoki Popperni o'z ichiga olgan
bootstrap.bundle.min.js
/ dan foydalanishingiz kerak !bootstrap.bundle.js
- Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladi
util.js
. - Maslahatlar unumdorlik sabablariga ko'ra qo'shiladi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
- Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.
container: 'body'
Murakkabroq komponentlarda (masalan, kirish guruhlarimiz, tugma guruhlarimiz va h.k.) muammolarni keltirib chiqarmaslik uchun belgilang .- Yashirin elementlarda maslahatlarni ishga tushirish ishlamaydi.
.disabled
Yoki elementlar uchun maslahatlar oʻramdisabled
elementida ishga tushirilishi kerak.- Bir nechta satrlarni qamrab oluvchi giperhavolalardan ishga tushirilganda, maslahatlar markazlashtiriladi. Ushbu xatti-harakatdan qochish
white-space: nowrap;
uchun s-da foydalaning.<a>
- Tegishli elementlar DOMdan olib tashlanishidan oldin maslahatlar yashirilishi kerak.
- Ko'rsatmalar soya DOM ichidagi element tufayli ishga tushirilishi mumkin.
prefers-reduced-motion
media so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang
.
Hammasi bormi? Ajoyib, keling, ularning qanday ishlashini ba'zi misollar bilan ko'rib chiqaylik.
Misol: Maslahatlarni hamma joyda yoqing
Sahifadagi barcha maslahatlarni ishga tushirishning bir usuli ularni data-toggle
atributiga ko'ra tanlashdir:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Misollar
Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:
Maslahatlar bilan ba'zi ichki havolalarni ko'rsatish uchun to'ldiruvchi matn . Bu endi faqat to'ldiruvchi, qotil emas. Bu yerda faqat haqiqiy matn mavjudligini taqlid qilish uchun joylashtirilgan kontent . Va bularning barchasi sizga haqiqiy vaziyatlarda foydalanilganda maslahatlar qanday ko'rinishi haqida fikr berish uchun. Umid qilamanki, siz o'zingizning saytingizda yoki loyihangizda foydalansangiz, havolalardagi ushbu maslahatlar amalda qanday ishlashini ko'rgansiz .
To'rtta maslahat yo'nalishini ko'rish uchun quyidagi tugmalar ustiga kursorni bosing: yuqori, o'ng, pastki va chap.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Va maxsus HTML qo'shilgan:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Foydalanish
Ko'rsatma plagini so'rov bo'yicha tarkib va belgilarni yaratadi va sukut bo'yicha maslahatlarni ishga tushirish elementidan keyin joylashtiradi.
JavaScript orqali asboblar maslahatini ishga tushiring:
$('#example').tooltip(options)
Toshib ketish auto
vascroll
overflow: auto
Ko'rsatma joylashuvi ota-konteynerda bo'lsa yoki overflow: scroll
biznikiga o'xshasa, avtomatik ravishda o'zgartirishga harakat qiladi .table-responsive
, lekin baribir asl joylashuv joylashuvini saqlab qoladi. Yechish uchun boundary
parametrni standart qiymatdan boshqa narsaga o‘rnating 'scrollParent'
, masalan 'window'
:
$('#example').tooltip({ boundary: 'window' })
Belgilash
Maslahat uchun kerakli belgi faqat data
atribut title
bo'lib, HTML elementida siz maslahatchi bo'lishni xohlaysiz. Ko'rsatmaning yaratilgan belgilari juda oddiy, lekin u joyni talab qilsa (odatda, top
plagin tomonidan o'rnatiladi).
Klaviatura va yordamchi texnologiyalar foydalanuvchilari uchun maslahatlar ishlashi
Siz faqat an'anaviy ravishda klaviaturaga qaratiladigan va interaktiv bo'lgan HTML elementlariga maslahatlar qo'shishingiz kerak (masalan, havolalar yoki shakl boshqaruvlari). Garchi ixtiyoriy HTML elementlarini (masalan, <span>
s) atributni qoʻshish orqali diqqatni jamlash mumkin boʻlsa -da tabindex="0"
, bu klaviatura foydalanuvchilari uchun interaktiv boʻlmagan elementlarga potentsial bezovta qiluvchi va chalkash tab toʻxtash joylarini qoʻshadi va hozirda koʻpchilik yordamchi texnologiyalar bu vaziyatda asboblar maslahatini eʼlon qilmaydi. Bunga qo'shimcha ravishda, maslahat uchun faqat hover
trigger sifatida ishonmang, chunki bu sizning maslahatlaringizni klaviatura foydalanuvchilari uchun ishga tushirishni imkonsiz qiladi.
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
O'chirilgan elementlar
Atributga ega boʻlgan elementlar disabled
interaktiv emas, yaʼni foydalanuvchilar koʻrsatmani (yoki qalqib chiquvchi) ishga tushirish uchun ularga diqqatini qarata olmaydi, kursorni koʻtara olmaydi yoki bosmaydi. Vaqtinchalik yechim sifatida siz oʻram <div>
yoki <span>
klaviaturadan foydalanib , klaviaturaga eʼtibor qaratilishi mumkin boʻlgan holda asboblar maslahatini ishga tushirishni va oʻchirilgan elementni tabindex="0"
bekor qilishni xohlaysiz.pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-animation=""
.
sanitize
,
sanitizeFn
va
whiteList
opsiyalarini ma'lumotlar atributlari yordamida ta'minlab bo'lmaydi.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
animatsiya | mantiqiy | rost | Asboblar maslahatiga CSS o'tishini qo'llang |
idish | string | element | yolg'on | yolg'on | Maslahatni ma'lum bir elementga qo'shadi. Misol: |
kechikish | raqam | ob'ekt | 0 | Maslahatni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda ishga tushirish turiga taalluqli emas Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi Ob'ekt tuzilishi: |
html | mantiqiy | yolg'on | Asboblar panelida HTMLga ruxsat bering. Agar rost bo'lsa, asboblar maslahatidagi HTML teglari asboblar XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning. |
joylashtirish | string | funktsiyasi | "yuqori" | Maslahatni qanday joylashtirish mumkin - avtomatik | yuqori | pastki | chap | to'g'ri. Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida asboblar maslahati DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish elementi bilan chaqiriladi. |
selektor | string | yolg'on | yolg'on | Agar selektor taqdim etilsa, asboblar paneli ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik ravishda qo'shilgan DOM elementlariga ( jQuery.on qo'llab-quvvatlash) maslahatlarni qo'llash uchun ham ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring . |
shablon | ip | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
Maslahat yaratishda foydalanish uchun asosiy HTML. Maslahatlar ga
Eng tashqi o'rash elementi va |
sarlavha | string | element | funktsiyasi | '' | Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati Agar funktsiya berilgan bo'lsa, u |
tetik | ip | 'fokusni ko'tarish' | Maslahatchi qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating.
|
ofset | raqam | string | funktsiyasi | 0 | Asboblar maslahatining maqsadiga nisbatan ofseti. Ofsetni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida ofset ma'lumotlarini o'z ichiga olgan ob'ekt bilan chaqiriladi. Funktsiya bir xil tuzilishga ega ob'ektni qaytarishi kerak. DOM tugunining ishga tushiruvchi elementi ikkinchi argument sifatida uzatiladi. Qo'shimcha ma'lumot olish uchun Popperning ofset hujjatlariga qarang . |
backbackPlacement | string | massiv | "aylantirish" | Qayta tiklashda Popper qaysi pozitsiyadan foydalanishini belgilashga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popperning xatti-harakatlari hujjatlariga qarang |
customClass | string | funktsiyasi | '' | Ko'rsatilganda, asboblar maslahatiga sinflarni qo'shing. E'tibor bering, bu sinflar shablonda ko'rsatilgan har qanday sinflarga qo'shimcha ravishda qo'shiladi. Bir nechta sinflarni qo'shish uchun ularni bo'sh joylar bilan ajrating: Bundan tashqari, qo'shimcha sinf nomlarini o'z ichiga olgan bitta satrni qaytarishi kerak bo'lgan funktsiyani o'tkazishingiz mumkin. |
chegara | string | element | 'scrollParent' | Asboblar maslahatining to'lib-toshish cheklovi chegarasi. 'viewport' , 'window' , 'scrollParent' , yoki HTMLElement havolasi qiymatlarini qabul qiladi (faqat JavaScript). Qo'shimcha ma'lumot olish uchun Popperning preventOverflow hujjatlariga qarang . |
sanitarizatsiya qilish | mantiqiy | rost | Sanitizatsiyani yoqing yoki o'chiring. Agar faollashtirilsa 'template' va 'title' opsiyalar tozalanadi. JavaScript hujjatlarimizdagi dezinfektsiyalash bo'limiga qarang . |
oq ro'yxat | ob'ekt | Standart qiymat | Ruxsat berilgan atributlar va teglarni o'z ichiga olgan ob'ekt |
sanitizeFn | null | funktsiyasi | null | Bu erda siz o'zingizning dezinfektsiyalash funksiyangizni taqdim etishingiz mumkin. Sanitizatsiyani amalga oshirish uchun maxsus kutubxonadan foydalanishni afzal ko'rsangiz, bu foydali bo'lishi mumkin. |
popperConfig | null | ob'ekt | null | Bootstrap-ning standart Popper konfiguratsiyasini o'zgartirish uchun Popper konfiguratsiyasiga qarang |
Shaxsiy maslahatlar uchun ma'lumotlar atributlari
Yuqorida aytib o'tilganidek, individual maslahatlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .
Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .
$().tooltip(options)
Elementlar to'plamiga asboblar paneli ishlov beruvchisini biriktiradi.
.tooltip('show')
Elementning asboblar maslahatini ko'rsatadi. Maslahat ko'rsatilishidan oldin (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . shown.bs.tooltip
Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi. Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.
$('#element').tooltip('show')
.tooltip('hide')
Elementning asboblar maslahatini yashiradi. Maslahat haqiqatda yashirilgunga qadar (ya'ni hidden.bs.tooltip
voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.
$('#element').tooltip('hide')
.tooltip('toggle')
Elementning asboblar maslahatini almashtiradi. Maslahat ko'rsatilishidan yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.shown.bs.tooltip
hidden.bs.tooltip
$('#element').tooltip('toggle')
.tooltip('dispose')
Elementning asboblar maslahatini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan maslahatlarni ( opsiya yordamida yaratilgan )selector
nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.
$('#element').tooltip('dispose')
.tooltip('enable')
Elementning asboblar maslahatiga ko'rsatish imkoniyatini beradi. Maslahatlar sukut bo'yicha yoqilgan.
$('#element').tooltip('enable')
.tooltip('disable')
Elementning asboblar maslahatini ko'rsatish imkoniyatini olib tashlaydi. Maslahat faqat qayta yoqilgan bo'lsa, ko'rsatilishi mumkin bo'ladi.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Elementning asboblar maslahatini ko'rsatish yoki yashirish imkoniyatini o'zgartiradi.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Elementning asboblar maslahati o'rnini yangilaydi.
$('#element').tooltip('update')
Voqealar
Tadbir turi | Tavsif |
---|---|
show.bs.maslahat | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. |
ko'rsatilgan.bs.maslahat | Ushbu hodisa asboblar maslahati foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.tooltip | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
yashirin.bs.yozuv maslahati | Ushbu voqea asboblar maslahati foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
kiritilgan.bs.maslahat | Ushbu hodisa voqeadan so'ng show.bs.tooltip DOMga asboblar maslahati shablonini qo'shgandan so'ng o'chiriladi. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})