Maslahat

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

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-bs-toggleatributiga ko'ra tanlashdir:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Misollar

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

To'rtta maslahat yo'nalishini ko'rish uchun quyidagi tugmalar ustiga kursorni bosing: yuqori, o'ng, pastki va chap. RTL-da Bootstrap-dan foydalanganda ko'rsatmalar aks ettiriladi.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Va maxsus HTML qo'shilgan:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

SVG bilan:

Sass

O'zgaruvchilar

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-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 bosmaydi. Vaqtinchalik yechim sifatida siz oʻram <div>yoki <span>klaviaturadan foydalanib, klaviaturaga eʼtibor qaratilishi mumkin boʻlgan vosita maslahatini ishga tushirishni xohlaysiz tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-kabi qoʻshing data-bs-animation="". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda optsion nomining registr turini camelCase’dan kabob-case’ga oʻzgartirishni unutmang. Misol uchun, dan foydalanish o'rniga data-bs-customClass="beautifier", foydalaning data-bs-custom-class="beautifier".

Funktsiyadan foydalanishpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Usullari

ko'rsatish

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.

tooltip.show()

yashirish

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.

tooltip.hide()

almashtirish

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

tooltip.toggle()

tasarruf qilish

Elementning asboblar maslahatini yashiradi va yo'q qiladi (DOM elementida saqlangan ma'lumotlarni o'chiradi). Delegatsiyadan foydalanadigan maslahatlarni ( opsiya yordamida yaratilgan )selector nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.

tooltip.dispose()

yoqish

Elementning asboblar maslahatiga ko'rsatish imkoniyatini beradi. Maslahatlar sukut bo'yicha yoqilgan.

tooltip.enable()

o'chirish

Elementning asboblar maslahatini ko'rsatish imkoniyatini olib tashlaydi. Maslahat faqat qayta yoqilgan bo'lsa, ko'rsatilishi mumkin bo'ladi.

tooltip.disable()

toggleEnabled

Elementning asboblar maslahatini ko'rsatish yoki yashirish imkoniyatini o'zgartiradi.

tooltip.toggleEnabled()

yangilash

Elementning asboblar maslahati o'rnini yangilaydi.

tooltip.update()

getInstance

DOM elementi bilan bog'liq bo'lgan maslahat namunasini olish imkonini beruvchi statik usul

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

DOM elementi bilan bog'langan maslahat namunasini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Voqealar

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()