Зөвлөмж

Тойм

Зөвлөмжийн залгаасыг ашиглахдаа мэдэх ёстой зүйлс:

• Зөвлөмжүүд нь байрлал тогтоохын тулд гуравдагч талын Поппер номын санд тулгуурладаг . Та bootstrap.js-н өмнө popper.min.js -г оруулах эсвэл зөвлөмжийг ажиллуулахын тулд Поппер агуулсан bootstrap.bundle.min.js/ -г ашиглах ёстой!bootstrap.bundle.js
• Хэрэгслийн зөвлөмжүүд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
• Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.
• container: 'body'Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .
• Нуугдсан элементүүдийн зөвлөмжийг идэвхжүүлэх нь ажиллахгүй.
• Боодлын элемент дээр .disabledэсвэл disabledэлементүүдийн зөвлөмжийг идэвхжүүлсэн байх ёстой.
• Олон мөрийг хамарсан гипер линкүүдээс өдөөгдөх үед зөвлөмжийг голд нь байрлуулна. Энэ зан үйлээс зайлсхийхийн тулд white-space: nowrap;өөрийн s дээр ашиглаарай .<a>
• Харгалзах элементүүдийг DOM-ээс хасахаас өмнө зөвлөмжийг нуусан байх ёстой.
• Сүүдрийн DOM доторх элементийн ачаар зөвлөмжийг идэвхжүүлж болно.

Энэ бүгдийг авсан уу? Гайхалтай, зарим жишээн дээр тэд хэрхэн ажилладагийг харцгаая.

Жишээ: Зөвлөмжийг хаа сайгүй идэвхжүүл

Хуудасны бүх зөвлөмжийг эхлүүлэх нэг арга бол тэдгээрийг data-bs-toggleшинж чанараар нь сонгох явдал юм:

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

Жишээ

Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:

Доорх товчлуурууд дээр хулганаа гүйлгэж, дээд, баруун, доод, зүүн гэсэн дөрвөн зөвлөмжийн чиглэлийг харна уу. RTL дээр Bootstrap ашиглах үед зааврыг толин тусгал хийдэг.

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

Мөн тусгай HTML нэмсэн:

<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-тэй:

Сасс

Хувьсагч

$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;

Хэрэглээ

Хэрэгслийн зөвлөмжийн залгаас нь хүсэлтийн дагуу контент болон тэмдэглэгээг үүсгэдэг бөгөөд анхдагч байдлаар зөвлөмжийг гох элементийн дараа байрлуулдаг.

JavaScript-ээр зааварчилгааг идэвхжүүлнэ үү:

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')
})

Тэмдэглэгээ

Зөвлөмжийн шаардлагатай тэмдэглэгээ нь зөвхөн dataшинж чанар бөгөөд titleтаны HTML элемент дээр зөвлөмж өгөхийг хүсч байна. Зөвлөмжийн үүсгэсэн тэмдэглэгээ нь маш энгийн боловч байрлал шаарддаг (анхдагчаар, topзалгаасаар тохируулсан).

<!-- 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>

Идэвхгүй элементүүд

Атрибуттай элементүүд нь disabledинтерактив биш тул хэрэглэгчид анхаарлаа төвлөрүүлэх, хулганыг хулганаа аваачих эсвэл товшиж хэрэгслийн зөвлөмжийг (эсвэл попов) идэвхжүүлэх боломжгүй гэсэн үг юм. Үүнийг шийдэхийн тулд та гарын авлагыг ашиглахад тохиромжтой <div>, эсвэл гар дээр төвлөрөх боломжтой цаасан дээрх зөвлөмжийг идэвхжүүлэхийг хүсэх болно .<span>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>

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-хавсаргана data-bs-animation="". Өгөгдлийн шинж чанараар сонголтуудыг дамжуулахдаа опционы нэрийн төрлийг camelCase-аас kebab-case болгон өөрчлөхөө мартуузай. Жишээлбэл, ашиглахын оронд data-bs-customClass="beautifier"ашиглах data-bs-custom-class="beautifier".

Функцийг ашигланpopperConfig

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

Арга зүй

шоу

Элементийн зөвлөмжийг харуулна. Зөвлөмжийг харуулахаас өмнө (өөрөөр хэлбэл shown.bs.tooltipүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг. Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.

tooltip.show()

нуугдах

Элементийн зөвлөмжийг нууна. Зөвлөмжийг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.tooltipүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг.

tooltip.hide()

солих

Элементийн зөвлөмжийг сэлгэх. Зөвлөмжийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.tooltipэсвэл hidden.bs.tooltipүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь зөвлөмжийг "гараар" идэвхжүүлсэн гэж үздэг.

tooltip.toggle()

захиран зарцуулах

Элементийн зөвлөмжийг нууж устгана (DOM элемент дээр хадгалагдсан өгөгдлийг устгана). Төлөөлөгчийг ашигладаг зөвлөмжийг ( selectorсонголтыг ашиглан үүсгэсэн ) удамшлын триггер элементүүд дээр тус тусад нь устгах боломжгүй.

tooltip.dispose()

идэвхжүүлэх

Элементийн зөвлөмжийг харуулах боломжийг олгоно. Зөвлөмжийг анхдагчаар идэвхжүүлсэн.

tooltip.enable()

идэвхгүй болгох

Элементийн зөвлөмжийг харуулах боломжийг арилгана. Зөвлөмжийг зөвхөн дахин идэвхжүүлсэн тохиолдолд л харуулах боломжтой.

tooltip.disable()

toggleEnabled

Элементийн зөвлөмжийг харуулах эсвэл нуух боломжийг сэлгэдэг.

tooltip.toggleEnabled()

шинэчлэх

Элементийн зөвлөмжийн байрлалыг шинэчилнэ.

tooltip.update()

getInstance

DOM элементтэй холбоотой зөвлөмжийн жишээг авах боломжийг олгодог статик арга

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

getOrCreateInstance

DOM элементтэй холбоотой зөвлөмжийн жишээг авах, эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

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

Үйл явдал

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

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

tooltip.hide()