Source

Aki taputapu

Ko nga tuhinga me nga tauira mo te taapiri i nga taputapu Bootstrap ritenga me te CSS me te JavaScript ma te whakamahi i te CSS3 mo nga pakiwaituhi me nga huanga-raraunga mo te rokiroki taitara rohe.

Tirohanga

Nga mea hei mohio ina whakamahi ana i te taputapu taputapu:

Ka whakawhirinaki nga aki taputapu ki te whare pukapuka tuatoru Popper.js mo te tuunga. Me whakauru koe i te popper.min.js i mua i te bootstrap.js me te whakamahi ranei bootstrap.bundle.min.js/ bootstrap.bundle.jskei roto Popper.js kia mahi ai nga aki taputapu!
Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .
Ko nga aki-utauta ka uru mai mo nga take mahi, no reira me arawhiti koe maau ano .
Ko nga aki taputapu whai taitara kore-roa e kore e whakaatuhia.
Tauwhāitihia container: 'body'kia karohia nga raru ki roto i nga waahanga uaua ake (penei i a maatau roopu whakauru, roopu paatene, aha atu).
Ko te whakaoho i nga aki taputapu mo nga huānga huna e kore e mahi.
Ko nga aki utauta mo nga huānga .disabledranei disabledme whakaoho i runga i tetahi huānga takai.
Ina puta mai i nga honongaitua e toro ana i nga raina maha, ka whakatetahi nga aki taputapu. Whakamahia white-space: nowrap;i runga i to <a>s ki te karo i tenei whanonga.
Me huna nga aki utauta i mua i te tangohanga o nga huānga e rite ana mai i te DOM.
Ka taea te whakakorikori i nga aki taputapu na tetahi huānga kei roto i te atarangi DOM.

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Kua whiwhi katoa? Pai, kia kite tatou me pehea te mahi me etahi tauira.

Tauira: Whakahohehia nga aki taputapu ki nga waahi katoa

Ko tetahi huarahi ki te arawhiti i nga aki taputapu katoa i runga i te wharangi ko te kowhiri ma o raatau data-togglehuanga:

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

Tauira

Whakaparo ki runga i nga hononga i raro nei kia kite i nga aki taputapu:

Whakaparohia ki runga i nga paatene kei raro nei kia kite i nga tohutohu aki taputapu e wha: runga, matau, raro, maui.

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

Me te taapiri HTML ritenga:

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

Whakamahinga

Ko te taputapu taputapu e whakaputa ihirangi me te tohu i runga i te tono, a ma te taunoa ka tuu i nga aki taputapu i muri i o raatau huānga whakaoho.

Whakaohohia te aki taputapu ma te JavaScript:

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

Puawai `auto`me`scroll`

Ka ngana te tuunga Aki Utauta ki te huri aunoa i te wa e pai ana te ipu matua ki a overflow: automaatau overflow: scroll, .table-responsiveengari kei te pupuri tonu i te tuunga o te tuunga taketake. Hei whakatau, tautuhia te boundarywhiringa ki tetahi mea ke atu i te uara taunoa 'scrollParent', penei 'window':

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

Tohutohu

Ko te tohu tohu mo te akiutauta he datahuanga anake, titlekei runga i te huānga HTML e hiahia ana koe ki te whai aki taputapu. He maamaa noa te tohu tohu taputapu, ahakoa me whai tuunga (ma te taunoa, ka tautuhia tope te mono).

Ko te mahi aki taputapu mo te papapātuhi me nga kaiwhakamahi hangarau awhina

Me taapiri noa nga akiutauta ki nga huānga HTML e aro nui ana ki te papapātuhi me te tauwhitiwhiti (pērā i ngā hononga, ngā mana puka). Ahakoa ko nga huānga HTML noa (pērā i <span>te s) ka taea te arotahi ma te taapiri i te tabindex="0"huanga, ka taapirihia nga aukati ripa hoha me te rangirua i runga i nga huānga tauwhitiwhiti-kore mo nga kaiwhakamahi papapātuhi, me te nuinga o nga hangarau awhina i tenei wa kaore i te panui i te taputapu i tenei ahuatanga. I tua atu, kaua e ti'aturi anake hoverhei keu mo to aki taputapu, na te mea ka kore e taea e au aki taputapu te whakaoho mo nga kaiwhakamahi papapātuhi.

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

Huānga hauā

Ko nga huānga whai disabledhuanga karekau i te tauwhitiwhiti, ko te tikanga kaore e taea e nga kaiwhakamahi te aro, te whakaparo, te paato ranei i a raatau hei whakaoho i te aki-utauta (he popover ranei). Hei huarahi mahi, ka hiahia koe ki te whakaoho i te aki taputapu mai i te takai <div>, <span>, i hangaia he papapātuhi-arotahi ma te whakamahi i te tabindex="0", ka turakina te pointer-eventsi runga i te huānga hauā.

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Kia mahara ko nga take haumaru e kore e taea te hoatu i nga sanitize, sanitizeFnme nga whiringa ma te whakamahi i nga huanga raraunga.whiteList

Ingoa	Momo	Taunoa	Whakaahuatanga
hākoritanga	boolean	pono	Hoatu he whakawhiti memeha CSS ki te aki taputapu
ipu	aho \| huānga \| teka	teka	He taapiri i te aki taputapu ki tetahi huānga motuhake. Tauira: `container: 'body'`. He tino whaihua tenei whiringa na te mea ka taea e koe te whakanoho i te akiutauta ki te rere o te tuhinga ki te taha o te huānga whakaoho - ka kore te aki utauta e maanu atu i te huānga whakaoho i te huringa o te matapihi.
whakaroa	tau \| ahanoa	0	Whakaroa te whakaatu me te huna i te aki taputapu (ms) - kaore e pa ki te momo keu a-ringa Mena ka tukuna he nama, ka tukuna he whakaroa ki te huna/whakakitenga e rua Ko te hanganga ahanoa:`delay: { "show": 500, "hide": 100 }`
html	boolean	teka	Whakaaetia te HTML ki te aki taputapu. Mena he pono, ko nga tohu HTML kei roto i te aki taputapu `title`ka tukuna ki te akiutauta. Mena he teka, `text`ka whakamahia te tikanga a jQuery ki te whakauru ihirangi ki te DOM. Whakamahia te kuputuhi mena kei te awangawanga koe mo nga whakaeke XSS.
whakanohonga	aho \| mahi	'runga'	Me pehea te whakanoho i te aki taputapu - auto \| runga \| raro \| maui \| tika. Ina `auto`tohua, ka whakahihikohia te aki taputapu. Ina whakamahia he taumahi ki te whakatau i te tuunga, ka kiia ko te tohu taputapu DOM node hei tohenga tuatahi me te huānga whakaoho DOM node hei tuarua. Kua `this`tautuhia te horopaki ki te tauira aki taputapu.
kaiwhiriwhiri	aho \| teka	teka	Mena ka whakaratohia he kaiwhiriwhiri, ka tukuna nga taonga aki taputapu ki nga whaainga kua tohua. I roto i te mahi, ka whakamahia tenei ki te whakamahi i nga aki taputapu ki te taapiri i nga huānga DOM ( `jQuery.on`tautoko). Tirohia tenei me tetahi tauira korero .
tauira	aho	`'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'`	HTML turanga hei whakamahi i te wa e hanga ana i te aki taputapu. `title`Ka werohia nga taputapu taputapu ki roto i te `.tooltip-inner`. `.arrow`ka waiho hei pere o te aki taputapu. Ko te huānga takai o waho me whai te `.tooltip`karaehe me te `role="tooltip"`.
taitara	aho \| huānga \| mahi	''	Te uara taitara taunoa mena `title`karekau he huanga. Mena ka hoatu he taumahi, ka karangahia me tana `this`huinga tohutoro ki te huānga e piri ana te aki taputapu.
keu	aho	'whakaaro arotahi'	Me pehea te mahi aki taputapu - pawhiria \| whakaparo \| arotahi \| ā-ringa. Ka taea e koe te whakawhiti i nga keu maha; wehea me te waahi. `'manual'`e tohu ana ka puta te aki taputapu ma te hotaka ma te `.tooltip('show')`, `.tooltip('hide')`me `.tooltip('toggle')`nga tikanga; e kore e taea te hono tenei uara ki tetahi atu keu. `'hover'`ka puta ko nga aki taputapu e kore e taea te whakaoho ma te papapātuhi, me whakamahi mena he huarahi ke atu mo te kawe korero mo nga kaiwhakamahi papapātuhi.
whakatiki	tau \| aho \| mahi	0	Wehenga o te aki taputapu e pa ana ki tana whaainga. Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi ahanoa kei roto nga raraunga whakawhiwhinga hei tohenga tuatahi. Me whakahoki te mahi i tetahi mea he rite tonu te hanganga. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Mo etahi atu korero tirohia nga tuhinga a Popper.js .
takahuriWhakaahua	aho \| huinga	'poho'	Tukua ki te whakapūtā ko tēhea te tūnga ka whakamahia e Popper ki te takahuri. Mo etahi atu korero tirohia nga tuhinga whanonga a Popper.js
rohe	aho \| huānga	'scrollParent'	Te rohe o te aki taputapu. Ka whakaae ki nga uara o `'viewport'`, `'window'`, `'scrollParent'`, he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper.js preventOverflow .
horoi	boolean	pono	Whakahohe, whakakorehia ranei te horoi. Mena ka whakahohehia `'template'`ka horoia nga `'title'`whiringa.
Rarangi ma	ahanoa	Uara taunoa	Ahanoa kei roto nga huanga me nga tohu kua whakaaetia
horoiFn	null \| mahi	null	I konei ka taea e koe te whakarato i a koe ake mahi horoi. Ka whai hua tenei ki te hiahia koe ki te whakamahi i te whare pukapuka whakatapua ki te mahi horoi.
popperConfig	null \| ahanoa	null	Hei huri i te whirihora Popper.js taunoa a Bootstrap, tirohia te whirihoranga a Popper.js

Nga huanga raraunga mo nga aki taputapu takitahi

Ko nga whiringa mo nga aki taputapu takitahi ka taea te tautuhi ma te whakamahi i nga huanga raraunga, pera i te whakamarama i runga ake nei.

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

`$().tooltip(options)`

Ka taapirihia he kaihautu taputapu ki tetahi kohinga huānga.

`.tooltip('show')`

He whakaatu i te aki taputapu o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te aki taputapu (arā i mua i te shown.bs.tooltipputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu. Ko nga aki utauta me nga taitara kore-roa e kore e whakaatuhia.

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

`.tooltip('hide')`

Hunaia te aki taputapu o tetahi huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te aki taputapu (ara i mua i te hidden.bs.tooltipputa o te takahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu.

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

`.tooltip('toggle')`

Ka takahurihia te akiutauta o tetahi huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i te huna ranei o te aki taputapu (arā, i mua i te puta o shown.bs.tooltipte hidden.bs.tooltiptakahanga). Ka kiia tenei he "a-ringa" te whakaoho o te aki taputapu.

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

`.tooltip('dispose')`

He huna me te whakangaro i te aki taputapu o tetahi huānga. Ko nga aki utauta e whakamahi ana i te tukunga (he mea hanga ma te whakamahi i te selectorwhiringa ) kaore e taea te whakakore takitahi i runga i nga huānga whakaoho uri.

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

`.tooltip('enable')`

Ka hoatu ki te akiutauta o tetahi huānga te kaha ki te whakaatu. Ko nga akiutauta ka taea te taunoa.

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

`.tooltip('disable')`

Tango i te kaha mo te aki taputapu o tetahi huānga kia whakaatuhia. Ka taea anake te whakaatu i te aki taputapu mena ka whakahohea ano.

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

`.tooltip('toggleEnabled')`

Ka takahuri i te kaha mo te akiutauta o tetahi huānga ki te whakaatu, huna ranei.

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

`.tooltip('update')`

He whakahōu i te tūnga o te akiutauta huānga.

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

Nga huihuinga

Momo Takahanga	Whakaahuatanga
show.bs.utautauta	Ka pupuhi tenei takahanga ina ka `show`karangahia te aratuka tauira.
whakaaturia.bs.utautauta	Ka pupuhihia tenei takahanga i te wa i kitea ai te aki taputapu ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
huna.bs.utautauta	Ka puhia tonutia tenei takahanga ina `hide`kua karangahia te aratuka tauira.
huna.bs.utautauta	Ka pupuhihia tenei takahanga ina mutu te hunanga o te taputapu mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
inserted.bs.tooltip	Ka puhia tenei takahanga i muri i te `show.bs.tooltip`takahanga i te wa i taapirihia te tauira aki taputapu ki te DOM.

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