Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
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 raraunga-bs-huanga mo te rokiroki taitara rohe.

Tirohanga

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

  • Ko nga aki taputapu ka whakawhirinaki 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!
  • 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.
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-bs-togglehuanga:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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 paatene kei raro nei kia kite i nga tohutohu aki taputapu e wha: runga, matau, raro, maui. Ka whakaatahia nga ahunga ina whakamahi i a Bootstrap i RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Me te taapiri HTML ritenga:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Me te SVG:

Sass

Taurangi

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Puawai automescroll

Ka ngana te tuunga Aki Utauta ki te huri aunoa i te wa e pai ana te ipu matuaoverflow: auto ki a overflow: scrollmaatau .table-responsive, engari kei te pupuri tonu i te tuunga o te tuunga taketake. Hei whakatau i tenei, tautuhia te boundarykowhiringa (mo te whakahuri pore e whakamahi ana i te popperConfigwhiringa) ki tetahi HTMLElement hei whakakore i te uara taunoa, 'clippingParents', penei document.body:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

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-bs-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="tooltip-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 mahi whakatika, ka hiahia koe ki te whakaoho i te aki taputapu mai i te takai <div>, i te <span>, i hangaia he papapātuhi-arotahi ma te whakamahi tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" 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-bs-, penei i te data-bs-animation="". Kia mohio koe ki te huri i te momo keehi o te ingoa whiringa mai i camelCase ki te kebab-case ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, hei utu mo te whakamahi data-bs-customClass="beautifier", whakamahia data-bs-custom-class="beautifier".

Kia mahara ko nga take haumaru e kore e taea te hoatu i te sanitize, sanitizeFn, me nga whiringa ma te whakamahi i nga huanga raraunga.allowList
Ingoa Momo Taunoa Whakaahuatanga
animation boolean true Hoatu he whakawhiti memeha CSS ki te aki taputapu
container aho | huānga | teka false

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.

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

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, innerTextka whakamahia nga taonga ki te whakauru ihirangi ki te DOM.

Whakamahia te kuputuhi mena kei te awangawanga koe mo nga whakaeke XSS.

placement aho | mahi 'top'

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.

selector aho | teka false 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 .
template aho '<div class="tooltip" role="tooltip"><div class="tooltip-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.

.tooltip-arrowka waiho hei pere o te aki taputapu.

Ko te huānga takai o waho me whai te .tooltipkaraehe me te role="tooltip".

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

trigger aho 'hover focus'

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 .show(), .hide()me .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.

fallbackPlacements huinga ['top', 'right', 'bottom', 'left'] Tautuhia nga waahi whakamuri ma te whakarato i te rarangi o nga tuunga i roto i te rarangi (i runga i te raupapa manakohanga). Mo etahi atu korero tirohia nga tuhinga whanonga a Popper
boundary aho | huānga 'clippingParents' Te rohe herenga puhake o te aki utauta (e pa ana ki te whakakē aukatiOverflow a Popper anake). Ma te taunoa 'clippingParents'ka taea te whakaae ki tetahi tohutoro HTMLElement (ma JavaScript anake). Mo etahi atu korero tirohia nga tuhinga detectOverflow a Popper .
customClass 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ā: 'class-1 class-2'.

Ka taea hoki e koe te tuku i tetahi mahi hei whakahoki i te aho kotahi kei roto etahi atu ingoa akomanga.

sanitize boolean true 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 .
allowList ahanoa Uara taunoa Ahanoa kei roto nga huanga me nga tohu kua whakaaetia
sanitizeFn 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.
offset huinga | aho | mahi [0, 0]

Wehenga o te aki taputapu e pa ana ki tana whaainga. Ka taea e koe te tuku aho ki nga huanga raraunga me nga uara wehea piko penei:data-bs-offset="10,20"

Ina whakamahia he taumahi ki te whakatau i te wehenga, ka karangahia me tetahi mea kei roto te tuunga popper, te tohutoro, me te popper rects hei tohenga tuatahi. Ka tukuna te node DOM huānga whakaoho hei tohenga tuarua. Me whakahoki te taumahi i te huānga me nga tau e rua: .[skidding, distance]

Mo etahi atu korero tirohia nga tuhinga a Popper .

popperConfig null | ahanoa | mahi null

Hei huri i te whirihora Popper taunoa a Bootstrap, tirohia te whirihoranga a Popper .

Ina whakamahia he mahi hei hanga i te whirihoranga Popper, ka karangahia me tetahi mea kei roto te whirihoranga Popper taunoa a Bootstrap. Ka awhina koe ki te whakamahi me te hanumi i te taunoa me to ake whirihoranga. Me whakahoki te mahi i tetahi ahanoa whirihoranga mo 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.

Te whakamahi mahi mepopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

whakaatu

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.

tooltip.show()

huna

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.

tooltip.hide()

takahuri

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.

tooltip.toggle()

tuku

Huna me te whakangaro i te aki taputapu o tetahi huānga (Ka tango i nga raraunga rongoa i te huānga DOM). 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.

tooltip.dispose()

taea

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

tooltip.enable()

whakakore

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.

tooltip.disable()

takahuriWhakahohe

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

tooltip.toggleEnabled()

whakahou

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

tooltip.update()

getInstance

Tikanga pateko e taea ai e koe te tiki i te tauira aki taputapu e hono ana ki tetahi huānga DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Tikanga pateko e taea ai e koe te tiki i te tauira aki taputapu e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Nga huihuinga

Momo takahanga Whakaahuatanga
show.bs.tooltip Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
shown.bs.tooltip Ka pupuhihia tenei takahanga i te wa i kitea ai te aki taputapu ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
hide.bs.tooltip Ka puhia tonutia tenei takahanga ina hidekua karangahia te aratuka tauira.
hidden.bs.tooltip 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.tooltiptakahanga i te wa i taapirihia te tauira aki taputapu ki te DOM.
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()