Aki taputapu

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.

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:

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)

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

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

Te whakamahi mahi mepopperConfig

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

Nga tikanga

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

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

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

tooltip.hide()