Source

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ā animation a me nā ʻikepili-ʻano 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ā ʻōlelo kōkua ma ka waihona ʻaoʻao ʻekolu Popper.js no ka hoʻonohonoho ʻana. Pono ʻoe e hoʻokomo i ka popper.min.js ma mua o ka bootstrap.js a i ʻole ka hoʻohana ʻana bootstrap.bundle.min.js/ bootstrap.bundle.jsi loaʻa iā Popper.js 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.

ʻ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 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ā mea kōkua:

ʻAʻole paha ʻoe i lohe iā lākou. Paʻi kiʻi umiumi maka denim letterpress vegan messenger bag stumptown. Loaʻa iā mcsweeney's fixie sustainable quinoa 8-bit ʻaʻahu ʻAmelika kahi terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, eha loko mcsweeney's cleanse vegan chambray. He kanaka hana hoʻohenehene i kēlā me kēia keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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 nā wahi paʻamau i nā tooltips ma hope o kā lākou mea hoʻoulu.

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 ʻana, 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ʻopaʻa ʻ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. Eia kekahi, ʻ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 ma hoverke ʻano he kumu no kāu hāmeʻa, no ka mea e hiki ʻole ai i kāu mau mea hana ke hoʻoulu 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, hoʻoluli, a i ʻole kaomi 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="".

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 | kaulahao 0 Offset o ka mea paahana pili i kona pahu hopu. No ka ʻike hou aku e nānā i nā palapala offset a Popper.js .
hāʻule hopePlacement kaula | pūʻulu 'pa'i' 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.js
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.js .

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ā mea hana 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 i ka wā i ʻike ʻia ai 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…
})