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

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:

Ko nga tarau tarau karekau pea koe i rongo. Pua whakaahua pahau denim mata reta vegan putea karere stumptown. Ko te quinoa 8-bit te kakahu o Amerika he terry richardson's fixie a mcsweeney's fixie te kakahu o Amerika he terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, e wha te purenga vegan chambray o roto mcsweeney. He tohunga toi tino whakahiato ahakoa te keytar , scenester farm-to-table banksy Austin twitter kakau freegan cred raw denim kotahi-taketake kawhe viral.

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 taapiri atu i nga aukati ripa hoha me te rangirua i runga i nga huānga tauwhitiwhiti kore mo nga kaiwhakamahi papapātuhi. I tua atu, ko te nuinga o nga hangarau awhina i tenei wa kaore i te whakaatu i te tohu 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="".

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 hei whakaahei i nga ihirangi HTML hihiri ki te whakauru i nga popovers. 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 0 Wehenga o te aki taputapu e pa ana ki tana whaainga. Mo etahi atu korero tirohia nga tuhinga a Popper.js .
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.js
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.js preventOverflow .

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 (arā 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…
})