Eszköztippek

Dokumentáció és példák egyéni Bootstrap eszköztippek hozzáadásához CSS-sel és JavaScripttel a CSS3 használatával animációkhoz és adatattribútumokhoz a helyi címtároláshoz.

Áttekintés

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

• Az eszköztippek a harmadik fél Popper.js 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 Popper.js fájlt tartalmazza!
• Ha a JavaScriptet forrásból készíti, akkor ehhezutil.js .
• 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.
• .disabledA 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. Ennek a viselkedésnek a elkerülése érdekében használja white-space: nowrap;a s.<a>
• Az eszköztippeket el kell rejteni, mielőtt a megfelelő elemeiket eltávolítanák a DOM-ból.

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

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

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.

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

Használat

Az eszköztipp beépülő modul igény szerint hoz létre tartalmat és 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:

$('#example').tooltip(options)

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-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="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 elemleírást egy burkolóból <div>vagy <span>ideális esetben a billentyűzetre fókuszálhatóvá kell tenni tabindex="0", és felülírja pointer-eventsa letiltott elemet.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" 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-következőhöz: data-animation="".

Mód

$().tooltip(options)

Eszköztipp-kezelőt csatol egy elemgyűjteményhez.

.tooltip('show')

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.

$('#element').tooltip('show')

.tooltip('hide')

Elrejti egy 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ő.

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('dispose')

Elrejti és megsemmisíti egy elem elemleírását. 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.

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

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.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

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

$('#element').tooltip('update')

Események

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})