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:

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 `title`ma ka ʻōlelo kōkua. Inā he wahaheʻe, `text`e 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 `auto`kuhikuhi ʻ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 `this`pōʻ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 `title`hoʻokomo ʻia nā mea hana i loko o ka `.tooltip-inner`. `.arrow`e lilo i pua o ka mea hana. Pono e loa'a ka `.tooltip`papa 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 `this`kuhikuhi 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 `show`kā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ā `hide`i 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.tooltip`hanana i ka wā i hoʻohui ʻia ai ka ʻōkuhi hāmeʻa i ka DOM.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})