Bootstrap Tooltips

BY admin
|
Hirdetések

Ezzel a bemutatóval megtanulhatod, hogyan készítsünk tooltipeket Bootstrap segítségével.

A Tooltipek létrehozása a Bootstrap segítségével

A tooltip egy kis felugró ablak, amely akkor jelenik meg, amikor a felhasználó az egérmutatót egy elem, például link vagy gomb fölé helyezi, hogy tippet vagy információt adjon a lebegtetett elemről.

A tooltipek nagyon hasznosak lehetnek a webhely új látogatói számára, mivel lehetővé teszik, hogy a felhasználó megtudja az ikonok és linkek célját, ha az egérmutatót rájuk helyezi.

1. lépés: A tooltip jelölés hozzáadása

A tooltip létrehozásához hozzá kell adni a data-toggle="tooltip" attribútumot egy elemhez. A title attribútummal adható meg a lebegtetéskor megjelenő tolltip-szöveg.

Itt van a hiperhivatkozáshoz tolltip hozzáadásának szabványos jelölése.

<a href=”#” data-toggle=”tooltip” title=”Valamilyen szöveg”>Hover over me</a>

Hasonlóan tooltipeket adhatunk más elemekhez is, például gombokhoz, ikonokhoz stb.

Figyelem: A teljesítmény miatt az eszköztip adat-apik opt-inek, vagyis az eszköztipek használatához magadnak kell inicializálnod őket a tooltip() metódussal.

2. lépés: A tooltipek inicializálása

A tooltipeket JavaScript segítségével lehet inicializálni – csak hívja meg a tooltip() Bootstrap metódust a id, class vagy a célelem bármely CSS szelektorával a JavaScript kódjában.

A tooltipeket egyenként vagy egyszerre is inicializálhatja. A következő jQuery-kód az összes tooltipet inicializálja az oldalon, ha a data-toggle attribútumuk alapján választja ki őket.

Példa

Próbálja ki ezt a kódot ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– A fenti példa kimenete valahogy így fog kinézni:

A tooltipek irányának beállítása

Elemek felső, jobb, alsó és bal oldalán megjelenő tooltipeket állíthatunk be.

A tooltipek elhelyezése adatattribútumok segítségével

A következő példában bemutatjuk, hogyan állíthatjuk be a tooltipek irányát adatattribútumok segítségével.

A tooltipek elhelyezése JavaScript segítségével

A következő példa azt mutatja be, hogyan lehet a tooltipek irányát JavaScript segítségével beállítani.

Options

Vannak bizonyos opciók, amelyeket át lehet adni a tooltip() Bootstrap módszerhez a tooltip plugin működésének testreszabásához.

Név Típus Egyértelmezett érték Megnevezés
animáció boolean true CSS fade átmenet alkalmazása a tooltiphez.
html boolean false HTML beillesztése az eszköztipbe. Ha false, akkor a jQuery text() módszerét fogja használni a tartalom beillesztésére a DOM-ba. Használja a szöveget, ha XSS-támadásoktól tart.
placement string | function ‘top’ A tooltip pozíciójának beállítása – top | bottom | left | right | auto. Az “auto” érték megadása esetén az eszköztár dinamikusan átirányítja az eszköztárat.
selector string false Ha megad egy szelektor, akkor az eszköztár objektumok a megadott célpontokhoz lesznek csatolva.
title string | function ” Beállítja az alapértelmezett title értéket, ha nincs title attribútum.
trigger string ‘hover focus’ Meghatározza, hogy a tooltip hogyan kerül kiváltásra – kattintás | hover | fókusz | manuális. Megjegyzés: többféle, szóközzel elválasztott trigger-típust adhat át.
delay number | object 0

A tooltip megjelenésének és elrejtésének késleltetési ideje (ms) – nem vonatkozik a manuális trigger-típusra.

Ha egy számot adunk meg, a késleltetés mind az elrejtésre, mind a megjelenítésre vonatkozik Objektumszerkezet is:
delay: { show: 500, hide: 100 }
container string | false false A tooltipet egy adott elemhez illeszti. container: 'body'
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Az eszköztip létrehozásához használandó alap HTML. Az eszköztip címe a .tooltip-inner osztályú elembe kerül beillesztésre, és a .tooltip-arrow osztályú elem lesz az eszköztip nyila.

A legkülső wrapper elemnek a .tooltip osztályúnak kell lennie.
viewport string | object { selector: 'body', padding: 0 } A tooltip az elem határain belül marad. Példa: viewport: '#viewport' vagy { selector: '#viewport', padding: 0 }
offset szám | string 0 A tooltip eltolása a célponthoz képest.
fallbackPlacement string | array ‘flip’ Megadja, hogy a Popper milyen pozíciót használjon fallback esetén.
boundary string | element ‘scrollParent’ A tooltip átfutási korlátjának határa. Elfogadja a 'viewport', 'window', 'scrollParent' vagy egy HTMLElement hivatkozás (csak JavaScript) értékeit.
sanitize boolean true A szanitizáció engedélyezése vagy letiltása. Ha aktiválva van, a ‘template’ és ‘title’ opciókat szanitizálni fogja.
whiteList object value Az engedélyezett attribútumokat és címkéket tartalmazó objektum.
sanitizeFn null | function null Megadja a saját szanitizáló függvényét.

Ezeket az opciókat vagy adatattribútumok vagy JavaScript segítségével állíthatja be. A tooltips opciók adatattribútumokon keresztül történő beállításához csak csatolja az opció nevét a data--hez a megfelelő értékkel együtt, mint például data-animation="false", data-placement="bottom" stb.

A JavaScript azonban előnyösebb módja ezen opciók beállításának, mivel megkíméli Önt az ismétlődő munkától. Lásd az alábbi részben a $().tooltip(options) tooltip módszerét, hogy megtudd, hogyan állíthatod be a tooltipek opcióit JavaScript segítségével.

Módszerek

Ezek a Bootstrap standard tooltip módszerei:

$().tooltip(options)

Ez a módszer egy elemcsoporthoz csatolja a tooltip kezelőt. Lehetővé teszi továbbá a tooltipek opcióinak beállítását, így azokat az igényeinknek megfelelően testreszabhatjuk.

A következő példa a megadott szöveget illeszti be a tooltipek belsejébe, ha a title attribútum értéke kimarad vagy hiányzik a kijelölt elemekből:

A következő példa azt mutatja be, hogyan helyezzük el a HTML-tartalmat a tooltip belsejében:

A következő példa azt mutatja be, hogyan szabályozzuk a tooltip megjelenítésének és elrejtésének időzítését a tooltip delay opciójának használatával JavaScript segítségével.

A következő példa megmutatja, hogyan hozhat létre saját egyéni sablont a Bootstrap tooltipekhez az alapértelmezett sablon használata helyett.

A következő példa a <body> elem helyett egy .wrapper elem végére illeszti be a dinamikusan generált tooltip HTML-kódját.

Megjegyzés: Az eszköztip alapértelmezett container opciós értékének felülírása nem eredményez látható különbséget az oldalon. A tényleges eredmény megtekintéséhez a Firebug vagy a Developer eszközeivel meg kell vizsgálnia a keletkező DOM-ot.

Hasonlóképpen, az $().tooltip(options) módszerrel más opciókat is beállíthat az eszköztippekhez. Nézzük meg a Bootstrap tooltip plugin egyéb módszereit.

.tooltip(‘show’)

Ez a módszer feltárja egy elem tooltipjét.

Példa

Próbáljuk ki ezt a kódot ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‘hide’)

Ez a módszer elrejti egy elem tooltipjét.

Példa

Try this code ” 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‘toggle’)

Ez a módszer váltja egy elem tooltipjét.

Példa

Próbálja ki ezt a kódot ” 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‘dispose’)

Ez a módszer elrejti és megsemmisíti egy elem tooltipjét.

.tooltip(‘enable’)

Ez a módszer lehetővé teszi egy elem tooltipjének megjelenítését. A tooltipek alapértelmezés szerint engedélyezettek.

Példa

Próbálja ki ezt a kódot ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‘disable’)

Ez a módszer megszünteti egy elem tooltipjének megjelenítési lehetőségét. A tooltip csak akkor lesz képes megjeleníteni, ha újra engedélyezzük.

.tooltip(‘toggleEnabled’)

Ez a módszer kapcsolja az elem tooltipjének megjelenítését vagy elrejtését.

.tooltip(‘update’)

Ez a metódus frissíti egy elem tooltipjének pozícióját.

Példa

Próbálja ki ezt a kódot ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Események

A Bootstrap tooltip osztálya tartalmaz néhány eseményt a tooltip funkcióhoz való kapcsolódáshoz.

Event Description
show.bs.tooltip Ez az esemény azonnal tüzel, amikor a show instance metódus meghívásra kerül.
shown.bs.tooltip Ez az esemény akkor tüzel, amikor a tooltip láthatóvá válik a felhasználó számára. A tüzelés előtt megvárja, amíg a CSS átmenet folyamata teljesen befejeződik.
hide.bs.tooltip Ez az esemény azonnal tüzel, amikor a hide instance metódus meghívásra került.
hidden.bs.tooltip Ez az esemény akkor tüzel, amikor a tooltip elrejtése a felhasználó elől befejeződött. A tüzelés előtt megvárja, amíg a CSS átmenet folyamata teljesen befejeződik.
inserted.bs.tooltip Ez az esemény a show.bs.tooltip esemény után tüzel, amikor a tooltip sablon hozzá lett adva a DOM-hoz.

A következő példa egy figyelmeztető üzenetet jelenít meg a felhasználónak, amikor a tooltip elhalványulása teljesen befejeződött.

Hirdetések

.