Eszköztippek

Áttekintés

Tudnivalók az eszköztipp-bővítmény használatakor:

• Az eszköztippek a harmadik fél Popper könyvtárára támaszkodnak a pozicionáláshoz. Az eszköztippek működéséhez a popper.min.js fájlt a bootstrap.js elé vagy a bootstrap.bundle.min.js/ bootstrap.bundle.jsparancsot, amely a Poppert tartalmazza!
• Az eszköztippeket teljesítmény okokból engedélyezik, ezért Önnek kell inicializálnia őket .
• A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.
• Adja meg container: 'body', hogy elkerülje a megjelenítési problémákat az összetettebb összetevőkben (például beviteli csoportjaink, gombcsoportjaink stb.).
• Az eszköztippek aktiválása a rejtett elemeken nem fog működni.
• .disabledAz elemekhez vagy elemekhez tartozó eszköztippeket a disabledburkolóelemen kell aktiválni.
• Ha több sort átívelő hiperhivatkozások váltják ki, az eszköztippek középre kerülnek. Használja white-space: nowrap;a <a>s-én, hogy elkerülje ezt a viselkedést.
• Az eszköztippeket el kell rejteni, mielőtt a megfelelő elemeiket eltávolítanák a DOM-ból.
• Az eszköztippek az árnyék-DOM-on belüli elemnek köszönhetően aktiválhatók.

Megvan az egész? Remek, lássuk, hogyan működnek néhány példával.

Példa: Eszköztippek engedélyezése mindenhol

data-bs-toggleAz oldalon lévő összes eszköztipp inicializálásának egyik módja az lenne, ha attribútumuk alapján választaná ki őket :

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

Példák

Az eszköztippek megtekintéséhez vigye az egérmutatót az alábbi linkekre:

Vigye az egérmutatót az alábbi gombok fölé, hogy megtekinthesse a négy eszköztipp-irányt: felül, jobb, lent és bal. A Bootstrap RTL-ben történő használatakor az irányok tükröződnek.

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

És egyéni HTML hozzáadásával:

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

SVG-vel:

Sass

Változók

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

Használat

Az eszköztipp-bővítmény igény szerint létrehozza a tartalmat és a jelöléseket, és alapértelmezés szerint az eszköztippeket a triggerelem után helyezi el.

Az elemleírás aktiválása JavaScripten keresztül:

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

Jelölés

Az eszköztipphez szükséges jelölés csak egy dataattribútum, és titleazon a HTML-elemen, amelyen elemleírást szeretne kapni. Az eszköztippek generált jelölése meglehetősen egyszerű, bár megköveteli a pozíciót (alapértelmezés topszerint a bővítmény állítja be).

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

Letiltott elemek

Az disabledattribútummal rendelkező elemek nem interaktívak, ami azt jelenti, hogy a felhasználók nem fókuszálhatnak rájuk, nem vihetik az egérmutatót rájuk, vagy nem kattinthatnak rájuk, hogy elemleírást (vagy előugró ablakot) indítsanak el. Megkerülő megoldásként az eszköztippet egy burkolóból <div>vagy <span>ideális esetben a billentyűzetre fókuszálhatóvá kell tenni a segítségével 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>

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-következőhöz: data-bs-animation="". Ügyeljen arra, hogy a beállításnév esettípusát camelCase-ről kebab-case-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például a használata helyett data-bs-customClass="beautifier"használja a data-bs-custom-class="beautifier".

A funkció használata apopperConfig

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

Mód

előadás

Megjeleníti egy elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelenne (azaz az shown.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp „kézi” aktiválásának tekinthető. A nulla hosszúságú címekkel rendelkező eszköztippek soha nem jelennek meg.

tooltip.show()

elrejt

Elrejti az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen el lett volna rejtve (azaz az hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp „kézi” aktiválásának tekinthető.

tooltip.hide()

kapcsolót

Bekapcsolja az elem elemleírását. Visszatér a hívóhoz, mielőtt az eszköztipp ténylegesen megjelent vagy elrejtett volna (azaz a shown.bs.tooltipvagy hidden.bs.tooltipesemény bekövetkezte előtt). Ez az eszköztipp „kézi” aktiválásának tekinthető.

tooltip.toggle()

eldob

Elrejti és megsemmisíti az elem elemleírását (Eltávolítja a DOM elemen tárolt adatokat). A delegálást használó eszköztippek (amelyek a selectorbeállítással jönnek létre ) nem semmisíthetők meg egyenként a leszármazott triggerelemeken.

tooltip.dispose()

engedélyezze

Lehetőséget ad egy elem elemleírásának megjelenítésére. Az eszköztippek alapértelmezés szerint engedélyezve vannak.

tooltip.enable()

letiltása

Eltávolítja az elem elemleírásának megjelenítési lehetőségét. Az eszköztipp csak akkor jelenik meg, ha újra engedélyezve van.

tooltip.disable()

toggleEnabled

Bekapcsolja az elem elemleírásának megjelenítését vagy elrejtését.

tooltip.toggleEnabled()

frissítés

Frissíti egy elem elemleírásának pozícióját.

tooltip.update()

getInstance

Statikus módszer, amely lehetővé teszi a DOM-elemhez társított eszköztipp-példány lekérését

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

getOrCreateInstance

Statikus módszer, amely lehetővé teszi az eszköztipp-példány DOM-elemhez társítását, vagy új létrehozását, ha nem inicializálták

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

Események

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

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

tooltip.hide()