Зөвлөмж

Хөдөлгөөнт дүрслэлд зориулсан CSS3 болон орон нутгийн гарчиг хадгалахад зориулсан өгөгдлийн шинж чанаруудыг ашиглан CSS болон JavaScript-ээр захиалгат Bootstrap хэрэгслийн зөвлөмжийг нэмэх баримт бичиг ба жишээнүүд.

Тойм

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

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

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

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

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

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

Жишээ

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

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

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

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

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

Хэрэглээ

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

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

$('#example').tooltip(options)

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

Тэмдэглэгээ

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

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

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

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

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-animation="".

Арга зүй

$().tooltip(options)

Элементийн цуглуулгад хэрэгслийн зааварчилгааг хавсаргана.

.tooltip('show')

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

$('#element').tooltip('show')

.tooltip('hide')

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

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('dispose')

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

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

Үйл явдал

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})