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 tɔd pati laybri Popper fɔ pozishɔn. Yu fɔ put popper.min.js bifo bootstrap.js, ɔ yuz wan bootstrap.bundle.min.jswe gɛt Popper.
• 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.

Ɛgzampul dɛn

Ɛnable tultip dɛn

As wi bin dɔn tɔk, yu fɔ bigin fɔ yuz di tultip dɛn bifo dɛn yuz dɛn. Wan we fɔ initialize ɔl di tultip dɛn na wan pej na fɔ pik dɛn bay dɛn data-bs-toggleatribyut, lɛk so:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tultip dɛn na di link dɛn

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Kastɔm ​​tultip dɛn

Yu kin kɔstɔmayz di apinɛns fɔ tultip dɛn yuz CSS vɛriɔbul dɛn . Wi sɛt wan kɔstɔm klas wit data-bs-custom-class="custom-tooltip"fɔ skɔp wi kɔstɔm apinɛns ɛn yuz am fɔ ɔvalayz wan lokal CSS vɛriɔbul.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Aw fɔ sho aw fɔ du am

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" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Wit wan SVG:

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, tultip dɛn naw de yuz lokal CSS vɛriɔbul dɛn on .tooltipfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass di vayriɔbul dɛn

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

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:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  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" data-bs-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" data-bs-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

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". 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 tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted fɔ data-bs-customClass="beautifier".

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Yuz funkshɔn witpopperConfig

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

Di we aw dɛn de du am

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Di tin dɛn we kin apin

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

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

tooltip.hide()