Source

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 Popper.js ga tayanadi . Maslahatlar ishlashi uchun bootstrap.js-dan oldin popper.min.jsbootstrap.bundle.min.js -ni qo'shishingiz yoki Popper.js-ni o'z ichiga olgan / dan foydalanishingiz kerak bootstrap.bundle.js!
  • Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.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.
  • .disabledYoki elementlar uchun maslahatlar oʻram disabledelementida 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.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia 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-toggleatributiga ko'ra tanlashdir:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Misollar

Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:

Qattiq shimlar keyingi darajadagi keffiyeh , ehtimol siz ular haqida eshitmagansiz. Foto stend soqol xom denim letterpress vegan messenger sumkasi Stumptown. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-bit amerikan kiyimida terri Richardson vinil chambray bor . Beard stumptown, kardiganlar banh mi lomo thundercats. Tofu biodizel Uilyamsburg marfa, to'rt loko mcsweeney ning tozalovchi vegan chambray. A, albatta, istehzoli hunarmand nima bo'lishidan qat'iy nazar, keytar , scenester farm-to-stol banksy Austin twitter handle freegan cred raw denim single-origin coffee virus.

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 autovascroll

overflow: autoKo'rsatma joylashuvi ota-konteynerda bo'lsa yoki overflow: scrollbiznikiga o'xshasa, avtomatik ravishda o'zgartirishga harakat qiladi .table-responsive, lekin asl joylashuv joylashuvini saqlab qoladi. Yechish uchun boundaryparametrni standart qiymatdan boshqa narsaga o‘rnating 'scrollParent', masalan 'window':

$('#example').tooltip({ boundary: 'window' })

Belgilash

Maslahat uchun kerakli belgi faqat dataatribut titlebo'lib, HTML elementida siz maslahatchi bo'lishni xohlaysiz. Ko'rsatmaning yaratilgan belgilari juda oddiy, lekin u joyni talab qilsa (odatda, topplagin 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 hovertrigger 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 disabledinteraktiv emas, yaʼni foydalanuvchilar koʻrsatmani (yoki qalqib chiquvchi) ishga tushirish uchun ularga diqqatini qarata olmaydi, kursorni koʻtara olmaydi yoki bosa olmaydi. Vaqtinchalik yechim sifatida siz oʻram <div>yoki <span>klaviaturadan foydalanib , klaviaturada diqqat markazida boʻlishi mumkin boʻlgan vosita 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="".

E'tibor bering, xavfsizlik nuqtai nazaridan sanitize, sanitizeFnva whiteListopsiyalarini 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: container: 'body'. Ushbu parametr, ayniqsa, foydalidir, chunki u sizga asboblar panelini hujjat oqimida ishga tushirish elementi yaqinida joylashtirish imkonini beradi - bu oyna o'lchamini o'zgartirish paytida asboblar paneli tetiklash elementidan uzoqlashishini oldini oladi.
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:delay: { "show": 500, "hide": 100 }
html mantiqiy yolg'on

Asboblar panelida HTMLga ruxsat bering.

Agar rost bo'lsa, asboblar maslahatidagi HTML teglari asboblar titlepanelida ko'rsatiladi. Agar noto'g'ri bo'lsa, jQuery textusuli DOMga tarkibni kiritish uchun ishlatiladi.

XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "yuqori"

Maslahatni qanday joylashtirish mumkin - avtomatik | yuqori | pastki | chap | to'g'ri.
Belgilanganida auto, u asboblar maslahatini dinamik ravishda o'zgartiradi.

Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida asboblar maslahati DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish elementi bilan chaqiriladi. thisKontekst asboblar maslahati misoliga o'rnatiladi .
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.onqo'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 titlekiritiladi .tooltip-inner.

.arrowasboblar maslahatining o'qiga aylanadi.

Eng tashqi o'rash elementi va .tooltipsinfiga ega bo'lishi kerak role="tooltip".
sarlavha string | element | funktsiyasi ''

Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati title.

Agar funktsiya berilgan bo'lsa, u thisasboblar paneli biriktirilgan elementga mos yozuvlar to'plami bilan chaqiriladi.
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.

'manual'.tooltip('show')asboblar maslahati , .tooltip('hide')va .tooltip('toggle')usullari orqali dasturiy ravishda ishga tushirilishini bildiradi ; bu qiymatni boshqa trigger bilan birlashtirib bo'lmaydi.

'hover'o'z-o'zidan klaviatura orqali ishga tushirilmaydigan ko'rsatmalarga olib keladi va faqat klaviatura foydalanuvchilari uchun bir xil ma'lumotlarni uzatishning muqobil usullari mavjud bo'lganda foydalanish kerak.
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 Popper.js ofset hujjatlariga qarang .
backbackPlacement string | massiv "aylantirish" Qayta tiklashda Popper qaysi pozitsiyadan foydalanishini belgilashga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popper.js ning xatti-harakatlari hujjatlariga qarang
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 Popper.js'ning preventOverflow hujjatlariga qarang .
sanitarizatsiya qilish mantiqiy rost Sanitizatsiyani yoqing yoki o'chiring. Agar faollashtirilsa 'template'va 'title'opsiyalar tozalanadi.
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 standart Popper.js konfiguratsiyasini o‘zgartirish uchun Popper.js 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 maslahati ishlovchisini 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.tooltipBu 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.tooltipvoqea 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.tooltiphidden.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 showmisol 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 hidemisol 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.tooltipDOMga asboblar maslahati shablonini qo'shgandan so'ng o'chiriladi. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})