in English

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 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 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 kua uru mai mo nga take mahi, no reira me arawhiti koe maau ake .
  • Ko nga aki taputapu whai taitara kore-roa e kore e whakaatuhia.
  • Tauwhāitihia container: 'body'kia kore e puta 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.
Ma te taunoa, ka whakamahia e tenei waahanga te kai horoi i roto i te ihirangi, ka tihorea nga huānga HTML kaore e tino whakaaetia. Tirohia te waahanga sanitizer i roto i a maatau tuhinga JavaScript mo etahi atu korero.
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:

Kuputuhi waahi hei whakaatu i etahi hononga- a- roto me nga aki taputapu. Ko tenei inaianei he whakakii noa, kaore he kaipatu. Ko nga ihirangi kua tukuna ki konei hei whakataurite i te ahua o nga tuhinga tuuturu . Me nga mea katoa hei hoatu whakaaro ki a koe mo te ahua o nga aki taputapu ina whakamahia ki nga ahuatanga o te ao. Na ko te tumanako kua kite koe me pehea te mahi a enei aki taputapu i runga i nga hononga , ina whakamahia e koe i runga i to ake pae, kaupapa ranei.

Whakaparohia ki runga i nga patene i 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 automescroll

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 aki 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 me te disabledhuanga kaore i te tauwhitiwhiti, ko te tikanga kaore e taea e nga kaiwhakamahi te arotahi, te whakaparo, te paato ranei ki te whakaoho i te aki-utauta (whakapapa 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 aki taputapu ki te rere o te tuhinga ki te taha o te huānga whakaoho - ka kore te akiutauta 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 titleka tukuna ki te akiutauta. Mena he teka, textka 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 autotohua, 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 thistautuhia 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.ontautoko). 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.

titleKa werohia nga taputapu taputapu ki roto i te .tooltip-inner.

.arrowka waiho hei pere o te aki taputapu.

Ko te huānga takai o waho me whai te .tooltipkaraehe me te role="tooltip".
taitara aho | huānga | mahi ''

Te uara taitara taunoa mena titlekarekau he huanga.

Mena ka hoatu he taumahi, ka karangahia me tana thishuinga 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 e mau ana nga raraunga whakaheke hei tohenga tuatahi. Me whakahoki te mahi i tetahi mea he rite tonu te hanganga. Ka tukuna te kopuku DOM huānga whakaoho hei tohenga tuarua.

Mo etahi atu korero tirohia nga tuhinga a Popper .
takahuriWhakaahua aho | huinga 'huri' 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
ritengaClass aho | mahi ''

Tāpirihia nga karaehe ki te aki taputapu ina whakaatuhia ana. Kia mahara ko enei karaehe ka taapiri atu ki nga karaehe kua tohua ki te tauira. Hei taapiri i nga karaehe maha, wehehia ki nga mokowā: 'a b'.

Ka taea hoki e koe te tuku i tetahi mahi hei whakahoki i te aho kotahi kei roto etahi atu ingoa akomanga.
rohe aho | huānga 'scrollParent' Te rohe herenga puhake 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 preventOverflow .
horoi boolean pono Whakahohe, whakakorehia ranei te horoi. Mena ka whakahohehia 'template'ka horoia nga 'title'whiringa. Tirohia te waahanga sanitizer i roto i ta maatau tuhinga JavaScript .
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 taunoa a Bootstrap, tirohia te whirihoranga a Popper

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 taputapu whai taitara kore-roa e kore e whakaatuhia.

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

.tooltip('hide')

Hunaia te akiutauta 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 hunanga 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 showkarangahia 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 hidekua 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 pupuhihia tenei takahanga i muri i te show.bs.tooltiptakahanga i te wa i taapirihia te tauira aki taputapu ki te DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})