Source

Зөвлөмж

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

Тойм

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

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

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

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

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

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

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

Жишээ

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

Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсэг веган мессенжер цүнх Stumptown. Фермээс ширээнд суух seitan, Mcsweeney's fixie sustainable quinoa 8-бит америк хувцас нь Терри Ричардсон винил камертай. Сахал хожуул, кардиган банх ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim single-origin coffee virus.

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

<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)
Халих autoбаscroll

overflow: autoЗөвлөмжийн байрлал нь эцэг эхийн контейнертэй эсвэл overflow: scrollманай -тай адил байх үед автоматаар өөрчлөхийг оролддог .table-responsiveболовч анхны байршлын байршлыг хадгалсаар байна. Шийдвэрлэхийн тулд boundaryтохиргоог өгөгдмөл утгаас өөр зүйлд тохируулна уу 'scrollParent', жишээ нь 'window':

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

Тэмдэглэгээ

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

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

Та зөвхөн уламжлалт гар дээр төвлөрч, интерактив байдаг (холбоос эсвэл маягтын удирдлага гэх мэт) HTML элементүүдэд зөвлөмж нэмэх хэрэгтэй. Хэдийгээр дурын HTML элементүүдийг ( <span>s гэх мэт) атрибут нэмснээр анхаарлаа tabindex="0"төвлөрүүлэх боломжтой боловч энэ нь гар хэрэглэгчдэд зориулсан интерактив бус элементүүдэд залхмаар, төөрөгдүүлсэн цонхны зогсоолуудыг нэмж өгөх бөгөөд ихэнх туслах технологиуд одоогоор энэ тохиолдолд зөвлөмжийг зарладаггүй. Нэмж hoverдурдахад, гарын хэрэглэгчдэд таны зөвлөмжийг өдөөх боломжгүй болгох тул зөвхөн зааварчилгааг өдөөгч гэж найдаж болохгүй.

<!-- 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="".

Аюулгүй байдлын үүднээс sanitize, sanitizeFnболон whiteListтохируулгуудыг өгөгдлийн шинж чанаруудыг ашиглан нийлүүлэх боломжгүйг анхаарна уу.

Нэр Төрөл Өгөгдмөл Тодорхойлолт
хөдөлгөөнт дүрс логик үнэн Хэрэгслийн зааварт CSS бүдгэрүүлэх шилжилтийг ашиглана уу
сав мөр | элемент | худлаа худлаа

Тодорхой элементийн зөвлөмжийг хавсаргана. Жишээ нь: container: 'body'. Энэ сонголт нь ялангуяа хэрэглүүртэй бөгөөд энэ нь танд хэрэглүүрийн зөвлөмжийг гох элементийн ойролцоох баримт бичгийн урсгалд байрлуулах боломжийг олгодог бөгөөд энэ нь цонхны хэмжээг өөрчлөх үед гох элементээс холдохоос сэргийлнэ.

саатал тоо | обьект 0

Зөвлөмжийг харуулах, нуухыг хойшлуулах (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { "show": 500, "hide": 100 }

html логик худлаа

Зөвлөгөөнд HTML-г зөвшөөрөх.

Хэрэв үнэн бол хэрэглүүрийн зөвлөмж дэх HTML хаягууд нь хэрэгслийн зөвлөмжид titleхарагдах болно. Хэрэв худал бол jQuery-ийн textаргыг DOM-д контент оруулахад ашиглана.

Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу.

байрлуулах мөр | функц 'дээд'

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

Байршлыг тодорхойлохын тулд функцийг ашиглах үед түүнийг эхний аргумент болгон багажийн зөвлөмжийн DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. thisКонтекстийг хэрэгслийн зөвлөмжийн жишээнд тохируулсан .

сонгогч мөр | худлаа худлаа Хэрэв сонгогчийг өгсөн бол хэрэгслийн зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт үүнийг динамикаар нэмсэн DOM элементүүдэд зааварчилгааг ашиглахад ашигладаг ( jQuery.onдэмжлэг). Үүнийг болон мэдээллийн жишээг үзнэ үү .
загвар мөр '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Зөвлөгөө үүсгэхэд ашиглах үндсэн HTML.

Хэрэгслийн titleзөвлөмжийг .tooltip-inner.

.arrowнь зөвлөмжийн сум болно.

Хамгийн гадна талын боодлын элемент нь .tooltipанги болон role="tooltip".

гарчиг мөр | элемент | функц ''

titleХэрэв шинж чанар байхгүй бол гарчгийн өгөгдмөл утга .

Хэрэв функц өгөгдсөн бол энэ нь thisмэдээллийн хэрэгслийн хавсаргасан элементийн лавлагааны багцын хамт дуудагдах болно.

гох мөр 'фокус дээр хулганаа чиглүүлэх'

Хэрэгслийн зөвлөмжийг хэрхэн идэвхжүүлдэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла.

'manual'.tooltip('show')аргачлалын зөвлөмжийг , .tooltip('hide')болон аргуудаар дамжуулан программчлан идэвхжүүлэхийг заана .tooltip('toggle'); Энэ утгыг өөр ямар ч триггертэй нэгтгэх боломжгүй.

'hover'дангаар нь гарын тусламжтайгаар өдөөх боломжгүй зөвлөмжийг бий болгох бөгөөд гар хэрэглэгчдэд ижил мэдээллийг дамжуулах өөр аргууд байгаа тохиолдолд л ашиглах ёстой.

офсет тоо | мөр | функц 0

Хэрэгслийн зөвлөмжийг зорилттой нь харьцуулсан офсет.

Функцийг офсетийг тодорхойлоход ашиглах үед түүнийг анхны аргумент болгон офсет өгөгдлийг агуулсан объектоор дууддаг. Функц нь ижил бүтэцтэй объектыг буцаах ёстой. Өдөөгч элементийн DOM зангилааг хоёр дахь аргумент болгон дамжуулна.

Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү .

backbackPlacement мөр | массив 'эргэх' Поппер буцах үед ямар байрлалыг ашиглахыг зааж өгөхийг зөвшөөр. Дэлгэрэнгүй мэдээллийг Popper.js-ийн зан үйлийн баримт бичгүүдээс үзнэ үү
хил хязгаар мөр | элемент 'scrollParent' Хэрэгслийн зөвлөмжийн халих хязгаарлалтын хил. 'viewport', 'window', 'scrollParent', эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Popper.js-ийн preventOverflow баримтаас үзнэ үү .
ариутгах логик үнэн Ариутгах ажиллагааг идэвхжүүлэх эсвэл идэвхгүй болгох. Идэвхжүүлсэн тохиолдолд 'template'сонголтууд 'title'цэвэрлэгдэх болно.
цагаан жагсаалт обьект Өгөгдмөл утга Зөвшөөрөгдсөн шинж чанарууд болон шошго агуулсан объект
ариутгахFn null | функц null Энд та өөрийн ариутгалын функцийг хангах боломжтой. Хэрэв та ариутгал хийхдээ зориулалтын номын сан ашиглахыг хүсвэл энэ нь хэрэг болно.
popperConfig null | обьект null Bootstrap-ийн өгөгдмөл Popper.js тохиргоог өөрчлөхийн тулд Popper.js-ийн тохиргоог үзнэ үү.

Тусдаа хэрэгслийн зөвлөмжийн өгөгдлийн шинж чанарууд

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

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

$().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')

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
show.bs.tooltip showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.хэрэгслийн зөвлөгөө Хэрэгслийн зөвлөмжийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
hide.bs.tooltip hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.tooltip Хэрэгслийн зөвлөмжийг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
оруулсан.bs.хэрэгслийн зөвлөгөө Энэ үйл явдлыг үйл явдлын дараа show.bs.tooltipDOM-д хэрэгслийн зөвлөмжийн загвар нэмсэн үед идэвхгүй болгоно.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})