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ā 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ā ʻōlelo kōkua ma ka waihona puke ʻaoʻao 3 Popper.js 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.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.

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:

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

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

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. I ka hoʻomaʻamaʻa ʻana, hoʻohana ʻia kēia e hiki ai i ka ʻike HTML dynamic ke hoʻohui i nā popovers. 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 '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.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ā 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…
})