in English

Mea kōkua

Nā palapala a me nā laʻana no ka hoʻohui ʻana i nā hāmeʻa Bootstrap maʻamau me CSS a me JavaScript me ka hoʻohana ʻana i CSS3 no nā animations a me nā ʻano ʻikepili no ka mālama ʻana i ka inoa kūloko.

Nānā nui

Nā mea e ʻike ai i ka hoʻohana ʻana i ka plugin tooltip:

  • Ke hilinaʻi nei nā hāmeʻa i ka waihona puke ʻaoʻao 3 Popper no ka hoʻonohonoho ʻana. Pono ʻoe e hoʻokomo i ka popper.min.js ma mua o bootstrap.js a i ʻole ka hoʻohana ʻana bootstrap.bundle.min.js/ bootstrap.bundle.jsi loaʻa iā Popper i mea e hana ai nā mea hana.
  • Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .
  • Hoʻokomo ʻia nā mea hana no nā kumu hana, no laila pono ʻoe e hoʻomaka iā ʻoe iho .
  • ʻAʻole hōʻike ʻia nā mea hana me nā poʻo inoa lōʻihi ʻole.
  • E wehewehe container: 'body'i mea e pale aku ai i nā pilikia i loko o nā ʻāpana paʻakikī (e like me kā mākou pūʻulu hoʻokomo, pūʻulu pihi, a pēlā aku).
  • ʻAʻole e holo ka hoʻoulu ʻana i nā mea hana i nā mea huna.
  • Pono e ho'āla ʻia nā ʻōlelo aʻoaʻo a i .disabledʻole disablednā ​​mea ʻeleʻele ma kahi ʻāpana wili.
  • Ke hoʻāla ʻia mai nā loulou i nā laina he nui, e kau ʻia nā mea hana. E hoʻohana white-space: nowrap;i kāu <a>s e pale i kēia ʻano.
  • Pono e hūnā ʻia nā mea hana ma mua o ka wehe ʻia ʻana o kā lākou mau mea pili mai ka DOM.
  • Hiki ke hoʻoulu ʻia nā ʻōlelo kōkua i kahi mea i loko o kahi DOM aka.
Ma ka maʻamau, hoʻohana kēia ʻāpana i ka mea hoʻomaʻemaʻe maʻiʻo i kūkulu ʻia, kahi e wehe ai i nā mea HTML i ʻae ʻole ʻia. E ʻike i ka ʻāpana sanitizer i kā mākou palapala JavaScript no nā kikoʻī hou aku.
ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Loaʻa ia mau mea a pau? Maikaʻi, e ʻike kākou pehea lākou e hana ai me kekahi mau laʻana.

Laʻana: E hoʻā i nā ʻōlelo kōkua ma nā wahi āpau

ʻO kahi ala e hoʻomaka ai i nā ʻōlelo aʻoaʻo a pau ma kahi ʻaoʻao ʻo ia ke koho ʻana iā lākou e ko lākou data-toggleʻano:

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

Nā laʻana

E kau ma luna o nā loulou ma lalo nei e ʻike i nā ʻōlelo kōkua:

ʻO kahi kikokikona e hōʻike ana i kekahi mau loulou inline me nā mea hana. He mea hoʻopiha wale nō kēia, ʻaʻohe mea pepehi kanaka. Hoʻokomo ʻia ka ʻike ma ʻaneʻi e hoʻohālike i ke ʻano o ka kikokikona maoli . A ʻo nā mea a pau e hāʻawi wale iā ʻoe i ka manaʻo o ke ʻano o nā mea hana i ka wā i hoʻohana ʻia i nā kūlana honua maoli. No laila, manaʻolana ʻoe ua ʻike ʻoe pehea e hana ai kēia mau mea hana ma nā loulou ma ka hoʻomaʻamaʻa, ke hoʻohana ʻoe iā lākou ma kāu pūnaewele a i ʻole papahana.

E kau ma luna o nā pihi ma lalo e ʻike i nā ʻaoʻao ʻehā: luna, ʻākau, lalo, a hema.

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

A me ka HTML maʻamau i hoʻohui ʻia:

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

Hoʻohana

Hoʻokumu ka plugin tooltip i ka ʻike a me ka markup ma ke koi, a ma ke ʻano maʻamau e waiho i nā tooltips ma hope o kā lākou mea hoʻomaka.

E hoʻomaka i ka mea hana ma o JavaScript:

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

Ke ho'āʻo nei ke kūlana Tooltip e hoʻololi ʻokoʻa ke loaʻa overflow: autoa overflow: scrollmakemake paha kahi pahu makua i kā mākou .table-responsive, akā mālama mau i ke kūlana o ke kau mua. No ka hoʻoholo, e hoʻonoho i ke boundarykoho i kekahi mea ʻē aʻe ma waho o ka waiwai paʻamau, 'scrollParent', e like me 'window':

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

Markup

ʻO ka māka i makemake ʻia no kahi hāmeʻa he datahiʻohiʻona wale nō a titlema ka mea HTML āu e makemake ai e loaʻa kahi hāmeʻa. He mea maʻalahi ka markup i hana ʻia o kahi hāmeʻa, ʻoiai pono ia i kahi kūlana (ma ka paʻamau, hoʻonohonoho ʻia tope ka plugin).

Ke hana nei i nā ʻōlelo kōkua no nā mea hoʻohana ʻenehana kōkua

Pono ʻoe e hoʻohui i nā ʻōlelo aʻoaʻo i nā mea HTML i maʻa mau i ka keyboard-focusable a me ka launa pū ʻana (e like me nā loulou a i ʻole nā ​​mana hoʻoponopono). ʻOiai hiki ke hoʻokaʻawale ʻia nā mea HTML ʻokoʻa (e like me <span>s) ma o ka hoʻohui ʻana i ke ʻano tabindex="0", e hoʻohui kēia i nā pahu hoʻonāukiuki a huikau i nā mea pili ʻole no nā mea hoʻohana keyboard, a ʻo ka hapa nui o nā ʻenehana kōkua i kēia manawa ʻaʻole hoʻolaha i ka tooltip i kēia kūlana. Eia hou, mai hilinaʻi wale ʻoe ma hoverke ʻano he kumu no kāu hāmeʻa, no ka mea, ʻaʻole hiki ke hoʻoulu ʻia kāu mau hāmeʻa no nā mea hoʻohana keyboard.

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

Nā mea hoʻopale

ʻAʻole pili nā mea me ka disabledhiʻohiʻona, ʻo ia hoʻi, ʻaʻole hiki i nā mea hoʻohana ke kālele, lele, a kaomi paha iā lākou no ka hoʻomaka ʻana i kahi hāmeʻa (a i ʻole popover). Ma ke ʻano he hana hoʻoponopono, makemake ʻoe e hoʻomaka i ka hāmeʻa mai kahi wīwī a i <div>ʻole <span>, hoʻohana pono ʻia i ka keyboard-focusable me ka hoʻohana ʻana tabindex="0", a hoʻopau i ka mea pointer-eventsma luna o ka mea kīnā.

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

E hoʻomanaʻo ʻaʻole hiki ke hāʻawi ʻia nā sanitize, sanitizeFna me whiteListnā koho me ka hoʻohana ʻana i nā ʻano ʻikepili.
inoa ʻAno Default wehewehe
hoʻouluulu boolean ʻoiaʻiʻo E noi i kahi hoʻololi fade CSS i ka mea hana
ipu kaula | mea | wahahee wahahee

Hoʻopili i ka mea hana i kahi mea kikoʻī. Laʻana: container: 'body'. He mea pono loa kēia koho no ka mea hiki iā ʻoe ke hoʻonoho i ka mea hana ma ke kahe o ka palapala ma kahi o ka mea hoʻāla - e pale aku i ka mea hana mai ka lana ʻana mai ka mea hoʻāla i ka wā e hoʻololi ai ka puka makani.
lohi helu | mea 0

Hoʻopaneʻe ka hōʻike ʻana a me ka hūnā ʻana i ka hāmeʻa (ms) - ʻaʻole pili i ke ʻano hoʻoiho lima

Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua

ʻO ka hoʻolālā mea:delay: { "show": 500, "hide": 100 }
html boolean wahahee

E ʻae iā HTML ma ka ʻōlelo kōkua.

Inā ʻoiaʻiʻo, e hāʻawi ʻia nā hōʻailona HTML ma ka ʻōlelo aʻoaʻo mea hana titlema ka ʻōlelo kōkua. Inā he wahaheʻe, texte hoʻohana ʻia ke ʻano o jQuery e hoʻokomo i ka ʻike i loko o ka DOM.

E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo kaula | hana 'luna'

Pehea e hoʻonoho ai i ka mea hana - auto | luna | lalo | waiho | akau.
Ke autokuhikuhi ʻia, e hoʻohuli hou ia i ka tooltip.

Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka hoʻokomo ʻana, ua kapa ʻia ʻo ia me ka mea hana DOM node ma ke ʻano he kumu hoʻopaʻapaʻa mua a me ka mea hoʻomaka DOM node ʻo ia ka lua. Hoʻonohonoho ʻia ka thispōʻaiapili i ka laʻana mea hana.
mea koho kaula | wahahee wahahee Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea hāmeʻa i nā pahuhopu i kuhikuhi ʻia. Ma ka hoʻomaʻamaʻa, hoʻohana ʻia kēia no ka hoʻopili ʻana i nā hāmeʻa i hoʻohui pū ʻia i nā mea DOM ( jQuery.onkākoʻo). E ʻike i kēia a me kahi laʻana ʻike .
template kaulahao '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML e hoʻohana i ka hana ʻana i ka mea hana.

E titlehoʻokomo ʻia nā mea hana i loko o ka .tooltip-inner.

.arrowe lilo i pua o ka mea hana.

Pono e loa'a ka .tooltippapa a me ka role="tooltip".
inoa kaula | mea | hana ''

Waiwai poʻo inoa paʻamau inā titleʻaʻole i loaʻa ke ʻano.

Inā hāʻawi ʻia kahi hana, e kāhea ʻia ia me kāna thiskuhikuhi i hoʻonohonoho ʻia i ka mea i hoʻopili ʻia ka tooltip.
hoʻomaka kaulahao 'hover focus'

Pehea e hoʻoulu ʻia ai ka mea hana - kaomi | e hoolana | makaikai | manual. Hiki iā ʻoe ke hāʻawi i nā kumu he nui; e hoʻokaʻawale iā lākou me kahi ākea.

'manual'e hōʻike ana e hoʻomaka ʻia ka mea hana ma ka papahana ma o ka .tooltip('show'), .tooltip('hide')a me .tooltip('toggle')nā ala; ʻAʻole hiki ke hoʻohui ʻia kēia waiwai me nā kumu ʻē aʻe.

'hover'Ma kāna iho e hopena i nā mea hana i hiki ʻole ke hoʻoulu ʻia ma o ka papa keyboard, a pono e hoʻohana ʻia inā aia nā ala ʻē aʻe no ka lawe ʻana i ka ʻike like no nā mea hoʻohana keyboard.
offset helu | kaula | hana 0

Offset o ka mea paahana pili i kona pahu hopu.

Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka offset, ua kapa ʻia ia me kahi mea i loaʻa ka ʻikepili offset e like me kāna hoʻopaʻapaʻa mua. Pono ka hana e hoʻihoʻi i kahi mea me ke ʻano like. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua.

No ka ʻike hou aku, e nānā i nā palapala offset a Popper .
hāʻule hopePlacement kaula | pūʻulu 'pele' E ʻae e kuhikuhi i kahi kūlana e hoʻohana ai ʻo Popper ma ka hāʻule hope. No ka ʻike hou aku, e nānā i nā palapala hana a Popper
customClass kaula | hana ''

Hoʻohui i nā papa i ka mea hana ke hōʻike ʻia. E hoʻomaopopo e hoʻohui ʻia kēia mau papa i nā papa i kuhikuhi ʻia i loko o ka template. No ka hoʻohui ʻana i nā papa he nui, e hoʻokaʻawale iā lākou me nā hakahaka: 'a b'.

Hiki iā ʻoe ke hāʻawi i kahi hana e hoʻihoʻi i kahi kaula hoʻokahi i loaʻa nā inoa papa hou.
palena kaula | ʻeleʻele 'scrollParent' ʻO ka palena kaohi o ka mea hana. ʻAe i nā waiwai o 'viewport', 'window', 'scrollParent', a i ʻole HTMLElement reference (JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala preventOverflow a Popper .
hoʻomaʻemaʻe boolean ʻoiaʻiʻo E ho'ā a hoʻopau paha i ka hoʻomaʻemaʻe. Inā ho'ā 'template'a 'title'hoʻomaʻemaʻe ʻia nā koho. E ʻike i ka ʻāpana sanitizer i kā mākou palapala JavaScript .
papa inoa keʻokeʻo mea Waiwai paʻamau He mea i ʻae ʻia nā ʻano a me nā hōʻailona
hoomaemaeFn null | hana null Maanei hiki iā ʻoe ke hoʻolako i kāu hana hoʻomaʻemaʻe ponoʻī. Hiki ke kōkua inā makemake ʻoe e hoʻohana i kahi waihona i hoʻolaʻa ʻia e hana i ka hoʻomaʻemaʻe.
popperConfig null | mea null E hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper

Nā hiʻohiʻona ʻikepili no kēlā me kēia mea hana

Hiki ke ho'ākāka 'ia nā koho no nā mea hana hoʻokahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili, e like me ka wehewehe ʻana ma luna.

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

$().tooltip(options)

Hoʻopili i kahi mea hoʻohana mea hana i kahi hōʻiliʻili mea.

.tooltip('show')

Hōʻike i ka ʻōlelo kōkua o kahi mea. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea paahana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.tooltiphanana). Manaʻo ʻia kēia he "manual" triggering o ka tooltip. ʻAʻole hōʻike ʻia nā mea hana me nā poʻo inoa lōʻihi ʻole.

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

.tooltip('hide')

Hūnā i ka ʻōlelo aʻoaʻo mea paahana. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.tooltiphanana). Manaʻo ʻia kēia he "manual" triggering o ka tooltip.

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

.tooltip('toggle')

Hoʻololi i ka ʻōkuhi mea hana o kahi mea. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia ka mea hana (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.tooltipa i ʻole). hidden.bs.tooltipManaʻo ʻia kēia he "manual" triggering o ka tooltip.

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

.tooltip('dispose')

Hūnā a hoʻopau i ka mea paahana o kahi mea. ʻAʻole hiki ke hoʻopau pākahi ʻia nā mea hana e hoʻohana ana i ka ʻelele (i hana ʻia me ka hoʻohana ʻana i ke selectorkoho ).

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

.tooltip('enable')

Hāʻawi i kahi mea hana mea hana i hiki ke hōʻike ʻia. Hoʻohana ʻia nā hāmeʻa ma ka paʻamau.

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

.tooltip('disable')

Wehe i ka hiki ke hōʻike ʻia i ka mea paahana o kahi mea. Hiki ke hōʻike ʻia ka mea paahana inā hoʻā hou ʻia.

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

.tooltip('toggleEnabled')

Hoʻololi i ka hiki ke hōʻike ʻia a hūnā ʻia paha ka mea paahana.

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

.tooltip('update')

Hoʻohou i ke kūlana o kahi mea hana mea hana.

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

Nā hanana

ʻAno Hanana wehewehe
hōʻike.bs.tooltip Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike.bs.tooltip Hoʻopau ʻia kēia hanana ke ʻike ʻia ka mea hoʻohana i ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
hide.bs.tooltip Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
huna.bs.tooltip Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka mea hana mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
inserted.bs.tooltip Hoʻopau ʻia kēia hanana ma hope o ka show.bs.tooltiphanana i ka wā i hoʻohui ʻia ai ka ʻōkuhi hāmeʻa i ka DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})