Bootstrap Tooltips

BY admin
|
Anunțuri

În acest tutorial veți învăța cum să creați tooltips cu Bootstrap.

Crearea tooltip-urilor cu Bootstrap

Un tooltip este o mică fereastră pop-up care apare atunci când utilizatorul plasează indicatorul mouse-ului peste un element, cum ar fi un link sau butoane, pentru a oferi indicii sau informații despre elementul asupra căruia se trece.

Tooltipurile pot fi foarte utile pentru noii vizitatori ai site-ului dvs. web, deoarece acestea permit utilizatorului să cunoască scopul pictogramelor și al linkurilor prin plasarea indicatorului mouse-ului peste ele.

Pasul 1: Adăugarea marcajului Tooltip

Pentru a crea un tooltip, trebuie să adăugați atributul data-toggle="tooltip" la un element. Textul tolltip care ar fi afișat la hover poate fi specificat folosind atributul title.

Iată marcajul standard pentru adăugarea unui tolltip la un hyperlink.

<a href=”#” data-toggle=”tooltip” title=”Un text”>Să treci peste mine</a>

În mod similar, puteți adăuga tooltip-uri la alte elemente, cum ar fi butoane, pictograme, etc.

Nota: Din motive de performanță, datele-aparate ale tooltipurilor sunt opt-in, ceea ce înseamnă că pentru a utiliza tooltipurile trebuie să le inițializați singuri cu metoda tooltip().

Pasul 2: Declanșarea tooltipurilor

Tooltipurile pot fi declanșate prin JavaScript – trebuie doar să apelați metoda tooltip() Bootstrap tooltip() cu id, class sau orice selector CSS al elementului țintă în codul JavaScript.

Puteți fie să inițializați tooltipurile individual, fie pe toate dintr-o dată. Următorul cod jQuery va inițializa toate tooltips-urile de pe o pagină, selectându-le prin atributul data-toggle.

Exemplu

Încercați acest cod ” 

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

– Rezultatul exemplului de mai sus va arăta cam așa:

Setarea direcțiilor tooltipurilor

Puteți seta ca tooltipurile să apară în partea superioară, dreaptă, inferioară și stângă a unui element.

Punerea în poziție a tooltipurilor prin intermediul atributelor de date

Exemplul următor vă va arăta cum să setați direcția tooltipurilor prin intermediul atributelor de date.

Postionarea tooltipurilor prin JavaScript

Exemplul următor vă va arăta cum să setați direcția tooltipurilor prin JavaScript.

Opțiuni

Există anumite opțiuni care pot fi transmise metodei tooltip() Bootstrap pentru a personaliza funcționalitatea pluginului tooltip.

Name Type Default Value Description
animation boolean true Aplică o tranziție CSS fade la tooltip.
html boolean false Inserați html în tooltip. Dacă este falsă, metoda text() de la jQuery va fi utilizată pentru a insera conținut în DOM. Folosiți text dacă vă îngrijorează atacurile XSS.
placement string | function ‘top’ Stabilește poziția tooltip-ului – sus | jos | stânga | dreapta | auto. Atunci când este specificată valoarea „auto”, se va reorienta dinamic tooltip-ul.
selector string false Dacă este furnizat un selector, obiectele tooltip vor fi atașate la țintele specificate.
title string | function ” Stabilește valoarea implicită title dacă atributul title nu este prezent.
trigger string ‘hover focus’ Specificați cum este declanșat tooltip-ul – click | hover | focus | manual. Rețineți că puteți trece mai multe tipuri de declanșare, separate prin spații.
delay număr | obiect 0

Timp de întârziere pentru afișarea și ascunderea tooltip-ului (ms) – nu se aplică tipului de declanșare manuală.

Dacă se furnizează un număr, întârzierea se aplică atât la ascunderea cât și la afișarea structurii Object is:
delay: { show: 500, hide: 100 }
container string | false false Aplică tooltip-ul la un anumit element container: 'body'
template string

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

Bază HTML de utilizat la crearea tooltip-ului. Titlul tooltip-ului va fi inserat în elementul care are clasa .tooltip-inner, iar elementul cu clasa .tooltip-arrow va deveni săgeata tooltip-ului.

Elementul wrapper cel mai exterior trebuie să aibă clasa .tooltip.
viewport string | object { selector: 'body', padding: 0 } Păstrează tooltip-ul în limitele acestui element. Exemplu: viewport: '#viewport' sau { selector: '#viewport', padding: 0 }
offset număr | șir de caractere 0 Offset al tooltip-ului în raport cu ținta sa.
fallbackPlacement string | array ‘flip’ Vă permite să specificați ce poziție va folosi Popper la fallback.
boundary string | element ‘scrollParent’ Limita constrângerii de depășire a limitei tooltip-ului. Acceptă valorile 'viewport', , 'window', 'scrollParent' sau o referință la HTMLElement (numai în JavaScript).
sanitize boolean true Activați sau dezactivați dezinfectarea. Dacă este activată, opțiunile „template” și „title” vor fi dezinfectate.
whiteList object value Obiect care conține atributele și etichetele permise.
sanitizeFn null | function null Vă permite să specificați propria funcție de dezinfectare.

Puteți seta aceste opțiuni fie prin utilizarea atributelor de date, fie prin JavaScript. Pentru setarea opțiunilor tooltips prin intermediul atributelor de date, trebuie doar să adăugați numele opțiunii la data- împreună cu valoarea corectă, cum ar fi data-animation="false", data-placement="bottom" etc.

Cu toate acestea, JavaScript este modalitatea mai preferabilă pentru setarea acestor opțiuni, deoarece vă scutește de munca repetitivă. Consultați metoda $().tooltip(options) a tooltip-ului din secțiunea de mai jos pentru a ști cum să setați opțiunile pentru tooltip-uri folosind JavaScript.

Metode

Acestea sunt metodele standard ale tooltip-ului din Bootstrap:

$().tooltip(options)

Această metodă atașează gestionarul tooltip-ului la un grup de elemente. De asemenea, vă permite să setați opțiunile pentru tooltip-uri, astfel încât să le puteți personaliza în funcție de nevoile dumneavoastră.

Exemplul următor va insera textul specificat în interiorul tooltip-urilor în cazul în care valoarea atributului title este omisă sau lipsește din elementele selectate:

Exemplul următor vă va arăta cum să plasați conținutul HTML în interiorul unui tooltip:

Exemplul următor vă va arăta cum să controlați momentul afișării și ascunderii tooltip-ului folosind opțiunea delay a tooltip-ului prin JavaScript.

Exemplul următor vă va arăta cum vă puteți crea propriul șablon personalizat pentru tooltip-urile Bootstrap în loc să îl folosiți pe cel implicit.

Exemplul următor va insera codul HTML generat dinamic al tooltip-ului la sfârșitul unui element .wrapper în loc de elementul <body>.

Nota: Suprascrierea valorii implicite a opțiunii implicite container a tooltip-ului nu produce nicio diferență vizibilă în pagină. Pentru a vedea rezultatul real, trebuie să inspectați DOM-ul rezultat cu ajutorul instrumentelor Firebug sau Developer.

În mod similar, puteți seta și alte opțiuni pentru tooltip-uri folosind metoda $().tooltip(options). Să verificăm celelalte metode ale plugin-ului Bootstrap tooltip.

.tooltip(‘show’)

Această metodă dezvăluie tooltip-ul unui element.

Exemplu

Încercați acest cod ” 

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

.tooltip(‘hide’)

Această metodă ascunde tooltip-ul unui element.

Exemplu

Încercați acest cod ” 

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

.tooltip(‘toggle’)

Această metodă comută tooltip-ul unui element.

Exemplu

Încercați acest cod ” 

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

.tooltip(‘dispose’)

Această metodă ascunde și distruge tooltip-ul unui element.

.tooltip(‘enable’)

Această metodă conferă tooltip-ului unui element posibilitatea de a fi afișat. Tooltip-urile sunt activate în mod implicit.

Exemplu

Încercați acest cod ” 

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

.tooltip(‘disable’)

Această metodă elimină posibilitatea ca tooltip-ul unui element să fie afișat. Acesta va putea fi afișat numai dacă este activat din nou.

.tooltip(‘toggleEnabled’)

Această metodă comută posibilitatea ca tooltip-ul unui element să fie afișat sau ascuns.

.tooltip(‘update’)

Această metodă actualizează poziția tooltip-ului unui element.

Exemplu

Încercați acest cod ” 

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

Evenimente

Clasa tooltip din Bootstrap include câteva evenimente pentru conectarea la funcționalitatea tooltip.

Eveniment Descriere
show.bs.tooltip Acest eveniment se declanșează imediat ce este apelată metoda de instanță show.
shown.bs.tooltip Acest eveniment se declanșează atunci când tooltip-ul a fost făcut vizibil pentru utilizator. Acesta va aștepta până când procesul de tranziție CSS a fost complet finalizat înainte de a fi declanșat.
hide.bs.tooltip Acest eveniment este declanșat imediat ce metoda de instanță hide a fost apelată.
hidden.bs.tooltip Acest eveniment este declanșat atunci când tooltip a fost ascuns de utilizator. Acesta va aștepta până când procesul de tranziție CSS a fost complet finalizat înainte de a fi declanșat.
inserted.bs.tooltip Acest eveniment este declanșat după evenimentul show.bs.tooltip atunci când șablonul tooltip a fost adăugat în DOM.

Exemplul următor va afișa un mesaj de alertă pentru utilizator atunci când tranziția de estompare a tooltip-ului a fost complet finalizată.

Anunțuri

.