Source

Маслиҳатҳо

Ҳуҷҷатҳо ва мисолҳо барои илова кардани маслиҳатҳои фармоишии Bootstrap бо CSS ва JavaScript бо истифода аз CSS3 барои аниматсияҳо ва атрибутҳои додаҳо барои нигаҳдории унвонҳои маҳаллӣ.

Барраси

Чизҳоеро, ки ҳангоми истифодаи плагини абзор бояд донист:

  • Маслиҳатҳо барои ҷойгиркунӣ ба китобхонаи тарафи сеюми Popper.js такя мекунанд . Шумо бояд пеш аз bootstrap.js popper.min.js-ро дохил кунед ё истифода баред bootstrap.bundle.min.js/ bootstrap.bundle.jsки Popper.js-ро дар бар мегирад, то маслиҳатҳои асбобҳо кор кунанд!
  • Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .
  • Маслиҳатҳои асбобҳо бо сабабҳои кор қабул карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
  • Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
  • Барои container: 'body'пешгирӣ кардани мушкилот дар ҷузъҳои мураккабтар муайян кунед (ба монанди гурӯҳҳои вуруди мо, гурӯҳҳои тугмаҳо ва ғайра).
  • Ба кор андохтани маслиҳатҳои асбобҳо дар унсурҳои пинҳон кор намекунад.
  • Маслиҳатҳои асбобҳо барои .disabledё disabledунсурҳо бояд дар унсури печанда фаъол карда шаванд.
  • Вақте ки аз гиперҳаволаҳое, ки сатрҳои сершуморро дарбар мегиранд, оғоз карда мешаванд, маслиҳатҳои асбобҳо дар марказ ҷойгир карда мешаванд. Барои пешгирӣ кардани ин рафтори white-space: nowrap;худ истифода баред .<a>
  • Маслиҳатҳои асбобҳо бояд пеш аз хориҷ кардани унсурҳои мувофиқи онҳо аз DOM пинҳон карда шаванд.
  • Маслиҳатҳои асбобҳоро ба шарофати як унсури дохили DOM сояҳо фаъол кардан мумкин аст.

Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Ҳама инро доред? Аҷоиб, биёед бубинем, ки онҳо бо чанд мисол чӣ гуна кор мекунанд.

Мисол: Маслиҳатҳои абзорро дар ҳама ҷо фаъол созед

Як роҳи оғоз кардани ҳамаи маслиҳатҳои асбобҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggleатрибути онҳост:

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

Мисолхо

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Шимҳои танги сатҳи оянда keffiyeh шумо эҳтимол дар бораи онҳо нашунидаед. Аксҳо кабина риш хом denim letterpress vegan болишти паёмбаре Stumptown. Либоси амрикоии 8-битаи фарм-ба-сеитан, фиксии устувори квиноаи Максвини дорои винилии терри Ричардсон . Раъду риш, кардиганҳо banh mi lomo thundercats. Tofu biodiesel Williamsburg Марфа, чор Loko mcsweeney пок vegan chambray. A artisan воқеан ironic ҳар keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw denim қаҳва вирусӣ ягона.

Барои дидани чор самти маслиҳатҳои асбобҳо: боло, рост, поён ва чапро ба болои тугмаҳои зер кашед.

<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атрибут интерактивӣ нестанд, яъне корбарон наметавонанд диққати худро ба он ҷо оваранд ё клик кунанд, то маслиҳати абзорро (ё popover) оғоз кунанд. Ҳамчун як роҳи ҳал, шумо мехоҳед, ки маслиҳати абзорро аз як парпеч <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нишон дода мешаванд. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба 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 Гузаронидани маслиҳати абзор нисбат ба ҳадафаш. Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Popper.js муроҷиат кунед .
ҷойгиркунии бозгашт сатр | массив 'флип' Иҷозат диҳед, ки кадом мавқеъро Поппер ҳангоми бозгашт истифода хоҳад кард. Барои маълумоти бештар ба ҳуҷҷатҳои рафтори Popper.js муроҷиат кунед
сарҳад сатр | элемент 'scrollParent' Сарҳади маҳдудияти изофабори маслиҳати абзор. Қиматҳои 'viewport', 'window', 'scrollParent', ё истинодҳои HTMLElementро қабул мекунад (танҳо JavaScript). Барои маълумоти бештар ба Docs preventOverflow 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даъват кардани усули мисол сар мешавад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hide.bs.tooltip Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.tooltip Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор аз корбар пинҳон карда шавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
inserted.bs.tooltip Ин ҳодиса пас аз show.bs.tooltipҳодиса, вақте ки қолаби маслиҳати абзор ба DOM илова карда шудааст, оғоз мешавад. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})