Sfaturi instrumente

Prezentare generală

Lucruri de știut atunci când utilizați pluginul tooltip:

• Sfaturile instrumente se bazează pe biblioteca terță parte Popper pentru poziționare. Trebuie să includeți popper.min.js înainte de bootstrap.js, sau să utilizați unul bootstrap.bundle.min.jscare conține Popper.
• Sfaturile instrumente sunt înscrise din motive de performanță, așa că trebuie să le inițializați singur .
• Sfaturile instrumente cu titluri de lungime zero nu sunt niciodată afișate.
• Specificați container: 'body'pentru a evita problemele de randare în componente mai complexe (cum ar fi grupurile noastre de intrare, grupurile de butoane etc.).
• Declanșarea indicațiilor de instrucțiuni pentru elementele ascunse nu va funcționa.
• Sfaturile instrumente pentru .disabledsau disabledelemente trebuie să fie declanșate pe un element de înveliș.
• Când sunt declanșate de la hyperlinkuri care se întind pe mai multe linii, sfaturile instrumente vor fi centrate. Folosește -l white-space: nowrap;pe tine <a>pentru a evita acest comportament.
• Sfaturile cu instrumente trebuie ascunse înainte ca elementele lor corespunzătoare să fie eliminate din DOM.
• Sfaturile cu instrumente pot fi declanșate datorită unui element din interiorul unui DOM umbră.

Ai toate astea? Grozav, să vedem cum funcționează cu câteva exemple.

Exemple

Activați sfaturile instrumente

După cum sa menționat mai sus, trebuie să inițializați sfaturile instrumente înainte de a putea fi utilizate. O modalitate de a inițializa toate sfaturile instrumente dintr-o pagină ar fi să le selectați după data-bs-toggleatributul lor, astfel:

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

Sfaturi pentru legături

Treceți cu mouse-ul peste linkurile de mai jos pentru a vedea sfaturi despre instrumente:

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

Sfaturi personalizate

Puteți personaliza aspectul indicațiilor cu ajutorul variabilelor CSS . Am stabilit o clasă personalizată cu data-bs-custom-class="custom-tooltip"pentru a ne defini aspectul personalizat și o folosim pentru a suprascrie o variabilă CSS locală.

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

Directii

Treceți cu mouse-ul peste butoanele de mai jos pentru a vedea cele patru indicații de indicații: sus, dreapta, jos și stânga. Indicațiile sunt reflectate atunci când utilizați Bootstrap în 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>

Și cu HTML personalizat adăugat:

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

Cu un SVG:

CSS

Variabile

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, sfaturile instrumente folosesc acum variabile CSS locale activate .tooltippentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$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};
  

Variabile Sass

$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

Utilizare

Pluginul de indicații cu instrumente generează conținut și markup la cerere și, în mod implicit, plasează indicatorii de informații după elementul de declanșare.

Declanșați balonul cu ajutorul JavaScript:

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

Markup

Markupul necesar pentru un balon explicativ este doar un dataatribut și titlepe elementul HTML doriți să aveți un balon explicativ. Markupul generat al unui tooltip este destul de simplu, deși necesită o poziție (în mod implicit, setată topde plugin).

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

Elemente dezactivate

Elementele cu disabledatributul nu sunt interactive, ceea ce înseamnă că utilizatorii nu se pot concentra, trece cu mouse-ul sau face clic pe ele pentru a declanșa un balon explicativ (sau popover). Ca o soluție de soluție, veți dori să declanșați sfatul cu instrumente dintr-un wrapper <div>sau <span>, în mod ideal, focalizat la tastatură folosind 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>

Opțiuni

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Folosind funcția cupopperConfig

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

Metode

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

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

Evenimente

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

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

tooltip.hide()