Tultip dɛn fɔ yuz

Ɔvaviu fɔ di Baybul

Tin dɛn fɔ no we yu de yuz di tultip plɔgin:

• Tultip dɛn de abop pan di 3rd pati laybri Popper fɔ pozishɔn. Yu fɔ put popper.min.js bifo bootstrap.js ɔ yuz bootstrap.bundle.min.js/ bootstrap.bundle.jswe gɛt Popper fɔ mek tultip dɛn wok!
• Tultip dɛn na opt-in fɔ pefɔmɛns rizin, so yu fɔ initialize dɛn yusɛf .
• Tultip dɛn we gɛt taytul dɛn we nɔ gɛt ziro nɔ de ɛva sho.
• Spɛsify container: 'body'fɔ avɔyd fɔ rɛnd prɔblɛm dɛn na mɔ kɔmpleks kɔmpɔnɛnt dɛn (lɛk wi input grup dɛn, bɔtin grup dɛn, ɛn ɔda wan dɛn).
• Fɔ trig tultip dɛn pan ɛlimɛnt dɛn we ayd nɔ go wok.
• Tultip fɔ .disabledɔ disabledɛlimɛnt dɛn fɔ trig pan wan wrap ɛlimɛnt.
• We dɛn trig am frɔm haypa link dɛn we de span bɔku layn dɛn, tultip dɛn go de na di sɛnt. Yuz white-space: nowrap;pan yu <a>s fɔ avɔyd dis bihayvya.
• Tultip dɛn fɔ ayd bifo dɛn dɔn pul dɛn kɔrɛspɔndɛns ɛlimɛnt dɛn na di DOM.
• Tultips kin trig tanks to wan elemɛnt insay wan shado DOM.

Yu get ol dat? Gret, mek wi si aw dɛn de wok wit sɔm ɛgzampul dɛn.

Example: Enable tultips evriwea

Wan we fɔ initialize ɔl di tultip dɛn na wan pej na fɔ pik dɛn bay dɛn data-bs-toggleatribyut:

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

Ɛgzampul dɛn

Hova oba di link dɛn we de dɔŋ fɔ si tultip dɛn:

Hova oba di bɔtin dɛn we de dɔŋ fɔ si di 4 tultip dɛn dairekshɔn dɛn: ɔp, rayt, dɔŋ, ɛn lɛft. Dairekshɔn dɛn de mirɔ we yu de yuz Bootstrap na 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>

Ɛn wit kɔstɔm HTML we dɛn ad:

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

Wit wan SVG:

Sass we bin de

Di tin dɛn we kin chenj

$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;

Aw fɔ yuz am

Di tultip plɔgin de jenarayz kɔntinyu ɛn mak pan dimand, ɛn bay difɔlt de put tultip dɛn afta dɛn trig ɛlimɛnt.

Trig di tultip bay JavaSkript:

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')
})

Mak-ap fɔ di tin dɛn we de apin

Di mak we yu nid fɔ wan tultip na jɔs wan dataatribyut ɛn titlena di HTML ɛlimɛnt yu want fɔ gɛt tultip. Di mak we dɛn dɔn mek fɔ wan tultip rili simpul, pan ɔl we i nid fɔ gɛt pozishɔn (bay difɔlt, topdi plɔgin sɛt to).

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

Di ɛlimɛnt dɛn we nɔ ebul fɔ wok

Elemɛnt dɛn wit di disabledatribyut nɔ de intaraktiv, we min se yuzman dɛn nɔ kin ebul fɔ fos, hova, ɔ klik dɛn fɔ trig wan tultip (ɔ popover). As wokarawnd, yu go want fɔ trig di tultip frɔm wan wrapa <div>ɔ <span>, we fayn fɔ mek yu yuz 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>

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-, lɛk insay data-bs-animation="". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm camelCase to kebab-case we yu de pas di opshɔn dɛn via data atribyut dɛn. Fɔ ɛgzampul, bifo yu yuz data-bs-customClass="beautifier", yuz data-bs-custom-class="beautifier".

Yuz funkshɔn witpopperConfig

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

Di we aw dɛn de du am

sho

Rivɛl wan ɛlimɛnt in tultip. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tultip (dat na bifo di shown.bs.tooltiptin apin). Dɛn kin tek dis as “manual” we de trig di tultip. Tultip dɛn we gɛt taytul dɛn we nɔ gɛt ziro nɔ de ɛva sho.

tooltip.show()

ayd

Ayd wan ɛlimɛnt in tultip. Ritɔn to di pɔsin we kɔl bifo di tultip dɔn rili ayd (dat na bifo di hidden.bs.tooltiptin apin). Dɛn kin tek dis as “manual” we de trig di tultip.

tooltip.hide()

fɔ chenj di we aw dɛn de

Toggles wan element in tultip. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho ɔ ayd di tultip (dat na bifo di shown.bs.tooltipɔ hidden.bs.tooltipivin apin). Dɛn kin tek dis as “manual” we de trig di tultip.

tooltip.toggle()

fɔ trowe am

Ayd ɛn pwɛl wan ɛlimɛnt in tultip (Rimov di data we dɛn dɔn kip na di DOM ɛlimɛnt). Tultip dɛn we de yuz delegɛshɔn (we dɛn mek yuz di selectoropshɔn ) nɔ kin ebul fɔ pwɛl wan wan pan disɛndant trig ɛlimɛnt dɛn.

tooltip.dispose()

ɛp

Gi wan elemɛnt in tultip di abiliti fɔ sho. Tultip dɛn de ɛnabul bay difɔlt.

tooltip.enable()

disebul

Rimov di abiliti fɔ wan ɛlimɛnt in tultip fɔ sho. Di tultip go jɔs ebul fɔ sho if dɛn dɔn ɛnabul am bak.

tooltip.disable()

toggleDɛn dɔn ɛnabul am

Toggles di abiliti fɔ wan elemɛnt in tultip fɔ sho ɔ ayd.

tooltip.toggleEnabled()

chenj

Ɔpdet di pozishɔn fɔ wan ɛlimɛnt in tultip.

tooltip.update()

getInstans fɔ di wan dɛn we de

Statik we de alaw yu fɔ gɛt di tultip instans we gɛt fɔ du wit wan DOM ɛlimɛnt

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

getƆKriɛtInstans

Statik we de alaw yu fɔ gɛt di tultip instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am

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

Di tin dɛn we kin apin

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

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

tooltip.hide()