Maslahat

Umumiy koʻrinish

Maslahat plaginidan foydalanganda bilishingiz kerak bo'lgan narsalar:

• Maslahatlar joylashishni aniqlash uchun uchinchi tomon kutubxonasi Popperga tayanadi . dan oldin popper.min.js ni qo'shishingiz kerak bootstrap.jsyoki bootstrap.bundle.min.jsPopper o'z ichiga olganidan foydalaning.
• 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.

Misollar

Maslahatlarni yoqish

Yuqorida aytib o'tilganidek, foydalanish uchun maslahatlarni ishga tushirishingiz kerak. Sahifadagi barcha maslahatlarni ishga tushirishning bir usuli ularni data-bs-toggleatributiga ko'ra tanlashdir, masalan:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Havolalar bo'yicha maslahatlar

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Shaxsiy maslahatlar

CSS o'zgaruvchilari yordamida maslahatlar ko'rinishini sozlashingiz mumkin . data-bs-custom-class="custom-tooltip"Biz shaxsiy ko'rinishimizni qamrab olish va mahalliy CSS o'zgaruvchisini bekor qilish uchun foydalanish uchun maxsus sinf o'rnatdik .

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Yo'nalishlar

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

SVG bilan:

CSS

O'zgaruvchilar

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida, maslahatlar endi .tooltipreal vaqtda yaxshilangan sozlash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass o'zgaruvchilari

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

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

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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 bosa olmaydi. 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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Variantlar

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo'lgan eksperimental zahiradagi ma'lumotlar atributini qo'llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Funktsiyadan foydalanishpopperConfig

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

Usullari

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Voqealar

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()