Ultimele tutoriale de dezvoltare web
 

Bootstrap JS Tooltip

❮ Anterior Următor Referință ❯

JS Tooltip (tooltip.js)

Plugin-ul Tooltip este mic caseta pop-up care apare atunci când utilizatorul deplasează cursorul mouse-ului peste un element.

Pentru un tutorial despre ponturile, citiți Bootstrap Tooltip Tutorial .

Via data-* Atribute

De data-toggle="tooltip" de data-toggle="tooltip" activează tooltip.

title atribut specifică textul care trebuie să fie afișat în interiorul tooltip.

Exemplu

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Încearcă - l singur »

Via JavaScript

Bule de plugin - uri nu sunt numai CSS, și , prin urmare , trebuie să fie inițializată cu jQuery: selectați elementul specificat și apelați tooltip() metoda.

Exemplu

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Încearcă - l singur »

Opțiuni tooltip

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a data- , la fel ca în data-placement="" .

Nume Tip Mod implicit Descriere Incearca-l
animationbooleantrue

Specifică dacă pentru a adăuga un efect de tranziție CSS estompare atunci când afișarea și ascunderea tooltip

  • true - Adăugați un efect de decolorare
  • false - Nu adăugați un efect de decolorare
Incearca-l
recipient string, sau boolean FALSE fals Atasaza tooltip la un element specific.
Exemplu: container: 'body' 		Incearca-l
delaynumber, or object0 Specifică numărul de milisecunde va lua pentru a afișa și ascunde tooltip.

Pentru a specifica o întârziere pentru care prezintă și un altul pentru a ascunde, utilizați structura obiectului:

delay: {show: 500, hide: 100} - care va avea 500 ms pentru a arăta tooltip , dar numai 100 ms pentru ao ascunde 		Incearca-l
htmlboolean false Specifică dacă să accepte etichete HTML în tooltip:
  • true - Acceptă etichete HTML
  • false - Nu acceptați etichete HTML
Notă: HTML trebuie să fie introdus în title atributul (sau folosind opțiunea din titlu).

Când este setat la fals (default) , jQuery's text() metodă va fi utilizată. Utilizați această opțiune dacă sunteți îngrijorat cu privire la atacurile XSS 		Incearca-l
placementstring"top" Specifică poziția tooltip. Valori posibile:

  • "top" - Tooltip pe partea de sus
  • "bottom" de "bottom" - Tooltip în partea de jos
  • "left" - Tooltip la stânga
  • "right" - Tooltip pe dreapta
  • "auto" - Permite browser - ul decide poziția tooltip. De exemplu, în cazul în care valoarea este "auto left" , tooltip va apărea în partea stângă atunci când este posibil, în caz contrar pe dreapta. Dacă valoarea este "auto bottom" de "auto bottom" , tooltip va afișa în partea de jos , atunci când este posibil, în caz contrar pe partea de sus
Incearca-l
selectorstring, or the boolean falsefalse Adaugă tooltip la un selector specificat Incearca-l
templatestring  HTML de bază pentru a utiliza la crearea tooltip.

Titlul Tooltip va fi introdus în elementul având clasa .tooltip-inner și elementul cu clasa .tooltip-arrow va deveni săgeata tooltip lui.

Elementul de înveliș exterior ar trebui să aibă .tooltip clasa.
titlestring"" Specifică textul care trebuie să fie afișat în interiorul tooltip Incearca-l
triggerstring"hover focus" Specifică modul în care se declanșează tooltip. Valori posibile:

  • "click" - Declanșați tooltip cu un clic
  • "hover" - Declanșare tooltip pe Hover
  • "focus" - declanșarea tooltip atunci când acesta devine focalizarea (prin tabbing sau clic .eg)
  • "manual" - Declanșați manual tooltip
Sfat: Pentru a introduce mai multe valori, separați - le cu un spațiu 		Incearca-l
viewportstring, or object{selector: "body" , padding: 0} Menține tooltip în limitele acestui element.

Exemplu: viewport: '#viewport' sau {selector: '#viewport', padding: 0}

Metode Tooltip

Tabelul următor listează metodele tooltip toate disponibile.

Metodă Descriere Incearca-l
. tooltip( options ) Activează tooltip cu o opțiune. A se vedea optiunile de mai sus pentru valori valide Incearca-l
. tooltip("show") Afișează tooltip Incearca-l
. tooltip("hide") Hides tooltip Incearca-l
. tooltip("toggle") Activeazã tooltip Incearca-l
. tooltip("destroy") Piei brute și distruge tooltip Incearca-l

Evenimente Tooltip

Tabelul următor listează evenimente tooltip toate disponibile.

Eveniment Descriere Incearca-l
show.bs.tooltip Are loc atunci când tooltip este pe cale să fie afișat Incearca-l
shown.bs.tooltip Are loc atunci când tooltip este pe deplin demonstrat (dupa tranzițiile CSS au finalizat) Incearca-l
hide.bs.tooltip Are loc atunci când tooltip este pe cale să fie ascunsă Incearca-l
hidden.bs.tooltip Are loc atunci când tooltip este complet ascuns (după tranzițiile CSS au finalizat) Incearca-l
Exemple

Exemple

Personalizat Tooltip Proiectare

Utilizați CSS pentru a personaliza aspectul tooltip:

Exemplu

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Încearcă - l singur »

❮ Anterior Următor Referință ❯