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-ээс хасахаас өмнө зөвлөмжийг нуусан байх ёстой.

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

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

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

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

Жишээ

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

Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсгийн веган мессенжер цүнх Stumptown. Фермээс ширээний сеитан, Максвинигийн 8 битийн америк хувцас нь Терри Ричардсоны винил камертай. Сахал хожуул, кардиган бан ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim one-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="".

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

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

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

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

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

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

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

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

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

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

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

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

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

сонгогч мөр | худлаа худлаа Хэрэв сонгогчийг өгсөн бол зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү .
загвар мөр '<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 Хэрэгслийн зөвлөмжийг зорилттой нь харьцуулсан офсет. Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү .
backbackPlacement мөр | массив 'эргэх' Поппер буцах үед ямар байрлалыг ашиглахыг зааж өгөхийг зөвшөөрнө үү. Дэлгэрэнгүй мэдээллийг Popper.js-ийн зан үйлийн баримт бичгүүдээс үзнэ үү
хил хязгаар мөр | элемент 'scrollParent' Хэрэгслийн зөвлөмжийн халих хязгаарлалтын хил. 'viewport', 'window', 'scrollParent', эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Popper.js-ийн preventOverflow баримтаас үзнэ үү .

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

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

Арга зүй

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

Бүх 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…
})