Зөвлөмж
Хөдөлгөөнт дүрслэлд зориулсан CSS3, орон нутгийн гарчиг хадгалахад зориулсан data-bs-attribute-уудыг ашиглан CSS болон JavaScript-тэй захиалгат Bootstrap хэрэгслийн зөвлөмжийг нэмэх баримт бичиг, жишээ.
Тойм
Зөвлөмжийн залгаасыг ашиглахдаа мэдэх ёстой зүйлс:
- Зөвлөмжүүд нь байрлал тогтоохын тулд гуравдагч талын Поппер номын санд тулгуурладаг . Та bootstrap.js-н өмнө popper.min.js -г оруулах эсвэл зөвлөмжийг ажиллуулахын тулд Поппер агуулсан
bootstrap.bundle.min.js
/ -г ашиглах ёстой!bootstrap.bundle.js
- Хэрэгслийн зөвлөмжүүд нь гүйцэтгэлийн шалтгаанаар сонгогддог тул та өөрөө эхлүүлэх хэрэгтэй .
- Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.
container: 'body'
Илүү төвөгтэй бүрэлдэхүүн хэсгүүдэд (манай оролтын бүлгүүд, товчлуурын бүлгүүд гэх мэт) асуудал гаргахгүйн тулд зааж өгнө үү .- Нуугдсан элементүүдийн зөвлөмжийг идэвхжүүлэх нь ажиллахгүй.
- Боодлын элемент дээр
.disabled
эсвэлdisabled
элементүүдийн зөвлөмжийг идэвхжүүлсэн байх ёстой. - Олон мөрийг хамарсан гипер линкүүдээс өдөөгдөх үед зөвлөмжийг голд нь байрлуулна. Энэ зан үйлээс зайлсхийхийн тулд
white-space: nowrap;
өөрийн s дээр ашиглаарай .<a>
- Харгалзах элементүүдийг DOM-ээс хасахаас өмнө зөвлөмжийг нуусан байх ёстой.
- Сүүдрийн DOM доторх элементийн ачаар зөвлөмжийг идэвхжүүлж болно.
prefers-reduced-motion
медиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү
.
Энэ бүгдийг авсан уу? Гайхалтай, зарим жишээн дээр тэд хэрхэн ажилладагийг харцгаая.
Жишээ: Зөвлөмжийг хаа сайгүй идэвхжүүл
Хуудасны бүх зөвлөмжийг эхлүүлэх нэг арга бол тэдгээрийг 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)
Халих auto
баscroll
Зөвлөмжийн байрлал нь эцэг эхийн контейнертэйoverflow: auto
эсвэл overflow: scroll
манай -тай төстэй үед автоматаар өөрчлөхийг оролддог .table-responsive
боловч анхны байршлын байршлыг хадгалсаар байна. Үүнийг шийдэхийн тулд өгөгдмөл утгыг хүчингүй болгохын тулд boundary
сонголтыг (сонголтыг ашиглан эргүүлэгчийн хувьд) дурын HTMLElement-д тохируулна уу , жишээ нь :popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
Тэмдэглэгээ
Зөвлөмжийн шаардлагатай тэмдэглэгээ нь зөвхөн data
шинж чанар бөгөөд title
таны HTML элемент дээр зөвлөмж өгөхийг хүсч байна. Зөвлөмжийн үүсгэсэн тэмдэглэгээ нь маш энгийн боловч байрлал шаарддаг (анхдагчаар, top
залгаасаар тохируулсан).
Хэрэгслийн зөвлөмжийг гар болон туслах технологийн хэрэглэгчид ашиглах боломжтой болгох
Та зөвхөн уламжлалт гар дээр төвлөрч, интерактив байдаг (холбоос эсвэл маягтын удирдлага гэх мэт) HTML элементүүдэд зөвлөмж нэмэх хэрэгтэй. Хэдийгээр дурын HTML элементүүдийг ( <span>
s гэх мэт) атрибут нэмснээр анхаарлаа tabindex="0"
төвлөрүүлэх боломжтой боловч энэ нь гар хэрэглэгчдэд зориулсан интерактив бус элементүүдэд залхмаар, төөрөгдүүлсэн цонхны зогсоолуудыг нэмж өгөх бөгөөд ихэнх туслах технологиуд одоогоор энэ тохиолдолд зөвлөмжийг зарладаггүй. Нэмж hover
дурдахад, гарын хэрэглэгчдэд таны зөвлөмжийг өдөөх боломжгүй болгох тул зөвхөн зааварчилгааг өдөөгч гэж найдаж болохгүй.
<!-- 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"
.
sanitize
,
sanitizeFn
, болон
allowList
сонголтуудыг өгөгдлийн шинж чанаруудыг ашиглан нийлүүлэх боломжгүйг анхаарна уу.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
animation |
логик | true |
Хэрэгслийн зааварт CSS бүдгэрүүлэх шилжилтийг ашиглана уу |
container |
мөр | элемент | худлаа | false |
Тодорхой элементийн зөвлөмжийг хавсаргана. Жишээ нь: |
delay |
тоо | обьект | 0 |
Зөвлөмжийг харуулах, нуухыг хойшлуулах (ms) - гарын авлагын гох төрөлд хамаарахгүй Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ Объектын бүтэц нь: |
html |
логик | false |
Зөвлөгөөнд HTML-г зөвшөөрөх. Хэрэв үнэн бол хэрэглүүрийн зөвлөмж дэх HTML хаягууд нь хэрэгслийн зөвлөмжид Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу. |
placement |
мөр | функц | 'top' |
Хэрэгслийн зөвлөмжийг хэрхэн байрлуулах вэ - auto | дээд | доод | зүүн | зөв. Байршлыг тодорхойлохын тулд функцийг ашиглах үед түүнийг эхний аргумент болгон багажийн зөвлөмжийн DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. |
selector |
мөр | худлаа | false |
Хэрэв сонгогчийг өгсөн бол хэрэгслийн зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт үүнийг динамикаар нэмсэн DOM элементүүдэд зааварчилгааг ашиглахад ашигладаг ( jQuery.on дэмжлэг). Үүнийг болон мэдээллийн жишээг үзнэ үү . |
template |
мөр | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Зөвлөгөө үүсгэхэд ашиглах үндсэн HTML. Хэрэгслийн
Хамгийн гадна талын боодлын элемент нь |
title |
мөр | элемент | функц | '' |
Хэрэв функц өгөгдсөн бол энэ нь |
trigger |
мөр | 'hover focus' |
Хэрэгслийн зөвлөмжийг хэрхэн идэвхжүүлдэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла.
|
fallbackPlacements |
массив | ['top', 'right', 'bottom', 'left'] |
Массив дахь байршлын жагсаалтыг гаргаж (давуу дарааллаар) нөөц байршуулалтыг тодорхойлно уу. Дэлгэрэнгүй мэдээллийг Попперын зан үйлийн баримт бичгүүдээс үзнэ үү |
boundary |
мөр | элемент | 'clippingParents' |
Хэрэгслийн зөвлөмжийн халих хязгаарлалтын хил хязгаар (зөвхөн Попперийн preventOverflow хувиргагчид хамаарна). Анхдагч байдлаар энэ 'clippingParents' нь HTMLElement лавлагааг хүлээн авах боломжтой (зөвхөн JavaScript-ээр). Дэлгэрэнгүй мэдээллийг Попперын detectOverflow баримтаас үзнэ үү . |
customClass |
мөр | функц | '' |
Зөвлөмжийг харуулах үед ангиудыг нэмнэ үү. Загварт заасан ангиуд дээр эдгээр ангиуд нэмэгдэх болно гэдгийг анхаарна уу. Олон анги нэмэхийн тулд тэдгээрийг хоосон зайгаар тусгаарлана уу: Та нэмэлт ангийн нэрийг агуулсан нэг мөрийг буцаах функцийг дамжуулж болно. |
sanitize |
логик | true |
Ариутгах ажиллагааг идэвхжүүлэх эсвэл идэвхгүй болгох. Идэвхжүүлсэн тохиолдолд 'template' сонголтууд 'title' цэвэрлэгдэх болно. Манай JavaScript баримт бичгийн ариутгагч хэсгийг үзнэ үү . |
allowList |
обьект | Өгөгдмөл утга | Зөвшөөрөгдсөн шинж чанарууд болон шошго агуулсан объект |
sanitizeFn |
null | функц | null |
Энд та өөрийн ариутгалын функцийг хангах боломжтой. Хэрэв та ариутгал хийхдээ зориулалтын номын сан ашиглахыг хүсвэл энэ нь хэрэг болно. |
offset |
массив | мөр | функц | [0, 0] |
Хэрэгслийн зөвлөмжийг зорилттой нь харьцуулсан офсет. Та өгөгдлийн атрибутууд дахь мөрийг таслалаар тусгаарласан утгуудыг дамжуулж болно: Функцийг офсетийг тодорхойлоход ашиглах үед түүнийг эхний аргумент болгон попперийн байрлал, лавлагаа, поппер шулуунуудыг агуулсан объектоор дууддаг. Өдөөгч элементийн DOM зангилааг хоёр дахь аргумент болгон дамжуулна. Функц нь хоёр тоо бүхий массивыг буцаах ёстой: . Дэлгэрэнгүй мэдээллийг Попперын офсет баримтаас үзнэ үү . |
popperConfig |
null | объект | функц | null |
Bootstrap-ийн өгөгдмөл Popper тохиргоог өөрчлөхийн тулд Попперын тохиргоог үзнэ үү . Попперын тохиргоог бий болгоход функцийг ашиглах үед Bootstrap-ийн анхдагч Popper тохиргоог агуулсан объектоор дуудагдана. Энэ нь танд өгөгдмөл тохиргоог өөрийн тохиргоотой ашиглах, нэгтгэхэд тусална. Функц нь Попперын тохиргооны объектыг буцаах ёстой. |
Тусдаа хэрэгслийн зөвлөмжийн өгөгдлийн шинж чанарууд
Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан тус тусын зөвлөмжийн сонголтуудыг зааж өгч болно.
Функцийг ашигланpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Арга зүй
Асинхрон аргууд ба шилжилтүүд
Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.
шоу
Элементийн зөвлөмжийг харуулна. Зөвлөмжийг харуулахаас өмнө (өөрөөр хэлбэл 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
Үйл явдал
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.tooltip |
show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
shown.bs.tooltip |
Хэрэгслийн зөвлөмжийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
hide.bs.tooltip |
hide Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.tooltip |
Хэрэгслийн зөвлөмжийг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
inserted.bs.tooltip |
Энэ үйл явдлыг үйл явдлын дараа show.bs.tooltip DOM-д хэрэгслийн зөвлөмжийн загвар нэмсэн үед идэвхгүй болгоно. |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()