Sfaturi instrumente

Prezentare generală

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

• Sfaturile cu 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 bootstrap.bundle.min.js/ bootstrap.bundle.jscare conține Popper pentru ca sfaturile instrumente să funcționeze!
• 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.

Exemplu: activați sfaturile instrumente peste tot

O modalitate de a inițializa toate sfaturile instrumente dintr-o pagină ar fi să le selectați după data-bs-toggleatributul lor:

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

Exemple

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

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

Și cu HTML personalizat adăugat:

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

Cu un SVG:

Sass

Variabile

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

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:

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

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" 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" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-bs-, ca în data-bs-animation="". 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, în loc să utilizați data-bs-customClass="beautifier", folosiți data-bs-custom-class="beautifier".

Folosind funcția cupopperConfig

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

Metode

spectacol

Dezvăluie explicația unui element. Se întoarce la apelant înainte ca indicația să fie afișată efectiv (adică înainte de apariția shown.bs.tooltipevenimentului). Aceasta este considerată o declanșare „manuală” a descrierii explicative. Sfaturile instrumente cu titluri de lungime zero nu sunt niciodată afișate.

tooltip.show()

ascunde

Ascunde explicația unui element. Se întoarce la apelant înainte ca indicația să fie ascunsă (adică înainte de apariția hidden.bs.tooltipevenimentului). Aceasta este considerată o declanșare „manuală” a descrierii explicative.

tooltip.hide()

comutare

Comută în lista de informații despre un element. Revine la apelant înainte ca balonul să fie afișat sau ascuns (adică înainte ca evenimentul shown.bs.tooltipsau să hidden.bs.tooltipapară). Aceasta este considerată o declanșare „manuală” a descrierii explicative.

tooltip.toggle()

dispune

Ascunde și distruge sfatul instrument al unui element (Elimină datele stocate pe elementul DOM). Sfaturile instrumente care folosesc delegarea (care sunt create folosind opțiunea selector) nu pot fi distruse individual pe elementele de declanșare descendente.

tooltip.dispose()

permite

Oferă un sfat instrument al unui element posibilitatea de a fi afișat. Sfaturile instrumente sunt activate în mod implicit.

tooltip.enable()

dezactivați

Elimină capacitatea de afișare a indicației unui element. Indicatorul va putea fi afișat numai dacă este reactivat.

tooltip.disable()

comuta Activat

Comută posibilitatea ca indicația unui element să fie afișată sau ascunsă.

tooltip.toggleEnabled()

Actualizați

Actualizează poziția descrierii explicative a unui element.

tooltip.update()

getInstance

Metodă statică care vă permite să obțineți instanța de indicație asociată unui element DOM

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

getOrCreateInstance

Metodă statică care vă permite să obțineți o instanță de indicație asociată unui element DOM sau să creați unul nou în cazul în care nu a fost inițializat

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

Evenimente

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

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

tooltip.hide()