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 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.js
parancsot, amely a Poppert tartalmazza! - Ha a JavaScriptet forrásból készíti, akkor ehhez
util.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.
.disabled
Az elemekhez vagy elemekhez tartozó eszköztippeket adisabled
burkoló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.
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-toggle
Az 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:
Helyőrző szöveg néhány soron belüli hivatkozás bemutatásához eszköztippekkel. Ez most csak töltelék, nem gyilkos. Az itt található tartalom csak a valódi szöveg jelenlétét utánozza . És mindezt csak azért, hogy képet kapjon arról, hogyan néznek ki az eszköztippek valós helyzetekben. Remélhetőleg most már láthatta, hogyan működhetnek a gyakorlatban ezek a linkekre vonatkozó eszköztippek , miután saját webhelyén vagy projektjeiben használja őket.
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: auto
vagy overflow: scroll
tetszik .table-responsive
, de továbbra is megtartja az eredeti elhelyezés pozícióját. A megoldáshoz állítsa a boundary
beá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 data
attribútum, és title
azon 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 top
szerint 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 hover
az 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 disabled
attribú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-events
a 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=""
.
sanitize
,
sanitizeFn
és
whiteList
opció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: |
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ő: |
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 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. Amikor egy függvényt használunk az elhelyezés meghatározására, akkor az eszköztipp DOM-csomópontja az első argumentum, és a kiváltó elem DOM-csomópontja a második. A |
választó | húr | hamis | hamis | Ha rendelkezésre áll választó, akkor 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.on tá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
A legkülső burkolóelem |
cím | húr | elem | funkció | '' | Az alapértelmezett címérték, ha Ha adott egy függvény, akkor a program úgy hívja meg, hogy a |
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.
|
beszámítás | szám | húr | funkció | 0 | Az eszköztipp eltolása a célhoz képest. Ha 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-féle eltolási dokumentumokat . |
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 viselkedési dokumentumait |
customClass | húr | funkció | '' | Adjon hozzá osztályokat az eszköztipphez, amikor megjelenik. Ne feledje, hogy ezek az osztályok a sablonban megadott bármely osztály mellé kerülnek hozzáadásra. Több osztály hozzáadásához szóközzel válassza el őket: Olyan függvényt is átadhat, amelynek egyetlen karakterláncot kell visszaadnia, amely további osztályneveket tartalmaz. |
határ | húr | elem | 'scrollParent' | Az eszköztipp túlcsordulási kényszerhatára. Elfogadja a 'viewport' , 'window' , 'scrollParent' , vagy a HTMLElement hivatkozás értékeit (csak JavaScript). További információkért tekintse meg a Popper 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. Tekintse meg a fertőtlenítő részt JavaScript dokumentációnkban . |
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 konfigurációjának módosításához lásd a Popper 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 . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . 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.tooltip
esemé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.tooltip
esemé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.tooltip
vagy hidden.bs.tooltip
esemé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 selector
beá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 show pé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 hide pé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 el lett rejtve 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.tooltip esemény után indul el, amikor az eszköztipp-sablont hozzáadták a DOM-hoz. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})