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.js
kei 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
.disabled
raneidisabled
me 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.
prefers-reduced-motion
uiui 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-toggle
huanga:
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 auto
mescroll
Ka ngana te tuunga Aki Utauta ki te huri aunoa i te wa e pai ana te ipu matuaoverflow: auto
ki a overflow: scroll
maatau .table-responsive
, engari kei te pupuri tonu i te tuunga o te tuunga taketake. Hei whakatau i tenei, tautuhia te boundary
kowhiringa (mo te whakahuri pore e whakamahi ana i te popperConfig
whiringa) 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 data
huanga anake, title
kei 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 top
e 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 hover
hei 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 disabled
huanga 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"
.
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: |
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: |
html |
boolean | false |
Whakaaetia te HTML ki te aki taputapu. Mena he pono, ko nga tohu HTML kei roto i te aki taputapu 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 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 |
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.on tautoko). 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.
Ko te huānga takai o waho me whai te |
title |
aho | huānga | mahi | '' |
Te uara taitara taunoa mena Mena ka hoatu he taumahi, ka karangahia me tana |
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.
|
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ā: 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: 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: . 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 .
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.tooltip
puta 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.tooltip
puta 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.tooltip
te hidden.bs.tooltip
takahanga). 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 selector
whiringa ) 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 show karangahia 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 hide kua 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.tooltip takahanga 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()