Source

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. Ahhoz, hogy az eszköztippek működjenek, a popper.min.js fájlt a bootstrap.js elé kell beírnia , vagy a bootstrap.bundle.min.js/ bootstrap.bundle.jsparancsot, amely tartalmazza a Popper.js fájlt!
  • 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.
  • .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. 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.
  • Az eszköztippek az árnyék-DOM-on belüli elemnek köszönhetően aktiválhatók.

Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ prefers-reduced-motion. Tekintse meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .

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:

Szűk nadrág következő szintű keffiyeh valószínűleg még nem hallott róluk. Photo Booth szakáll nyers farmer magasnyomású vegán futártáska stumptown. A gazdaságtól az asztalig terjedő seitán, az mcsweeney fixie, fenntartható quinoa 8 bites amerikai ruházata frottír richardson vinyl chambray -vel rendelkezik . Beard stumptown, kardigánok banh mi lomo thundercats. Tofu biodízel williamsburg marfa, négy loko mcsweeney's cleanse vegán chambray. Egy igazán ironikus kézműves , akármilyen keytar , scenester farm-to-table banksy Austin twitter fogantyú freegan cred nyers farmer egyetlen eredetű kávévírus.

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

$('#example').tooltip(options)
Túlcsordulás autoésscroll

Az eszköztipp pozíciója megkísérli automatikusan módosítani, ha egy szülőtároló rendelkezik a mi tárolónkkal, overflow: autovagy overflow: scrolltetszik .table-responsive, de továbbra is megtartja az eredeti elhelyezés pozícióját. A megoldáshoz állítsa a boundarybeállítást az alapértelmezett értéktől eltérő értékre, 'scrollParent'például 'window':

$('#example').tooltip({ boundary: 'window' })

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

Az eszköztippek működőképessé tétele a billentyűzet és a kisegítő technológiák felhasználói számára

Csak olyan HTML-elemekhez adjon eszköztippeket, amelyek hagyományosan billentyűzetre fókuszálhatók és interaktívak (például hivatkozások vagy űrlapvezérlők). Bár tetszőleges HTML-elemek (például <span>s) fókuszálhatóvá tehetők az tabindex="0"attribútum hozzáadásával, ez potenciálisan bosszantó és zavaró tabulátorokat ad a nem interaktív elemekhez a billentyűzet-felhasználók számára, és a legtöbb kisegítő technológia jelenleg nem jeleníti meg az eszközleírást ebben a helyzetben. Ezenkívül ne hagyatkozzon kizárólag hoveraz elemleírás indítójára, mivel ez lehetetlenné teszi az elemleírások aktiválását a billentyűzetet használók számára.

<!-- 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 eszköztippet egy burkolóból <div>vagy <span>ideális esetben a billentyűzetre fókuszálhatóvá kell tennie tabindex="0", és felülírhatja 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="".

Vegye figyelembe, hogy biztonsági okokból a sanitize, sanitizeFnés whiteListopciók nem adhatók meg adatattribútumokkal.

Név típus Alapértelmezett Leírás
élénkség logikai érték igaz Alkalmazzon CSS áttűnést az eszköztippre
tartály húr | elem | hamis hamis

Hozzáfűzi az elemleírást egy adott elemhez. Példa: container: 'body'. Ez az opció különösen hasznos, mivel lehetővé teszi az eszköztipp elhelyezését a dokumentum folyamában az indítóelem közelében – ami megakadályozza, hogy az eszköztipp elszálljon az indítóelemtől az ablak átméretezése során.
késleltetés szám | tárgy 0

Az eszköztipp megjelenítésének és elrejtésének késleltetése (ms) – nem vonatkozik kézi indítótípusra

Ha megad egy számot, akkor a késleltetés mindkét elrejtésre/megjelenítésre vonatkozik

Az objektum szerkezete a következő:delay: { "show": 500, "hide": 100 }
html logikai érték hamis

HTML engedélyezése az elemleírásban.

Ha igaz, akkor az elemleírásban található HTML-címkék titlemegjelennek az elemleírásban. Ha hamis, akkor a jQuery textmetódusát fogja használni a tartalom beszúrására a DOM-ba.

Használjon szöveget, ha aggódik az XSS-támadások miatt.
elhelyezés húr | funkció 'felül'

Az eszköztipp elhelyezése - auto | top | alsó | balra | jobb.
Ha automeg van adva, akkor dinamikusan átirányítja az eszköztippet.

Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az első argumentumként az eszköztipp DOM-csomópontja, a második argumentuma pedig a kiváltó elem DOM-csomópontja kerül meghívásra. A thiskontextus az eszköztipp példányra van beállítva.
választó húr | hamis hamis Ha rendelkezésre áll választó, az eszköztipp objektumok delegálásra kerülnek a megadott célokra. A gyakorlatban ezt az eszköztippek alkalmazására használják a dinamikusan hozzáadott DOM-elemekre ( jQuery.ontámogatás). Lásd ezt és egy tájékoztató példát .
sablon húr '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Az elemleírás létrehozásakor használandó alap HTML.

Az eszköztippeket a titlerendszer befecskendezi a .tooltip-inner.

.arrowaz eszköztipp nyila lesz.

A legkülső burkolóelem .tooltiposztályának és role="tooltip".
cím húr | elem | funkció ''

Alapértelmezett címérték, ha titleaz attribútum nincs jelen.

Ha adott egy függvény, akkor a program úgy hívja meg, hogy a thishivatkozása arra az elemre van beállítva, amelyhez az eszköztipp kapcsolódik.
ravaszt húr "lebegő fókusz"

Az eszköztipp aktiválása – kattintson a | lebeg | fókusz | kézikönyv. Több triggert is átadhat; szóközzel válassza el őket.

'manual'azt jelzi, hogy az eszköztipp programozottan aktiválódik a .tooltip('show'), .tooltip('hide')és .tooltip('toggle')metódusokkal; ez az érték nem kombinálható más triggerrel.

'hover'önmagában olyan eszköztippeket eredményez, amelyek nem indíthatók el a billentyűzeten keresztül, és csak akkor használhatók, ha vannak alternatív módszerek ugyanazon információk továbbítására a billentyűzetet használók számára.
beszámítás szám | húr | funkció 0

Az eszköztipp eltolása a célhoz képest.

Amikor egy függvényt használunk az eltolás meghatározására, akkor az eltolási adatokat tartalmazó objektum első argumentumaként kerül meghívásra. A függvénynek egy ugyanolyan szerkezetű objektumot kell visszaadnia. A kiváltó elem DOM csomópontja második argumentumként kerül átadásra.

További információkért tekintse meg a Popper.js offset dokumentumait .
backbackPlacement húr | sor 'flip' Hagyja megadni, hogy a Popper melyik pozíciót használja a tartaléknál. További információkért tekintse meg a Popper.js viselkedési dokumentumait
határ húr | elem 'scrollParent' Az eszköztipp túlcsordulási kényszerhatára. Elfogadja a 'viewport', 'window', 'scrollParent', vagy egy HTMLElement hivatkozás értékeit (csak JavaScript). További információkért tekintse meg a Popper.js preventOverflow dokumentumait .
Fertőtlenít logikai érték igaz Engedélyezze vagy tiltsa le a fertőtlenítést. Ha aktiválva van 'template', és 'title'az opciók fertőtlenítésre kerülnek.
fehérlista tárgy Alapértelmezett érték Objektum, amely engedélyezett attribútumokat és címkéket tartalmaz
fertőtlenítFn null | funkció nulla Itt megadhatja saját fertőtlenítő funkcióját. Ez akkor lehet hasznos, ha inkább egy dedikált könyvtárat szeretne használni a fertőtlenítéshez.
popperConfig null | tárgy nulla A Bootstrap alapértelmezett Popper.js konfigurációjának módosításához tekintse meg a Popper.js konfigurációját

Adatattribútumok az egyes elemleírásokhoz

Az egyes eszköztippek beállításai adatattribútumok használatával is megadhatók, a fentebb leírtak szerint.

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Amint az átmenet elkezdődik, de még azelőtt visszatérnek a hívóhoz . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat .

$().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 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ő.

$('#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

Esemény típus Leírás
show.bs.tooltip Ez az esemény azonnal aktiválódik a showpéldánymetódus meghívásakor.
látható.bs.eszközleírás Ez az esemény akkor aktiválódik, amikor az eszköztipp láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek).
elrejteni.bs.eszköztipp Ez az esemény azonnal elindul, amikor a hidepéldánymetódus meghívásra került.
rejtett.bs.eszközleírás Ez az esemény akkor aktiválódik, amikor az eszköztipp elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését).
beszúrva.bs.eszközleírás Ez az esemény az show.bs.tooltipesemény után indul el, amikor az eszköztipp-sablont hozzáadták a DOM-hoz. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})