Ultimele tutoriale de dezvoltare web
 

Bootstrap Plugin tooltip


Tooltip Plugin

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

Treceți cursorul peste mine

Sfat: Plugin - uri pot fi incluse în mod individual (using Bootstrap's individual "tooltip.js" file) , sau dintr -o dată (folosind "bootstrap.js" sau "bootstrap.min.js" ).


Cum Pentru a crea un Tooltip

Pentru a crea un tooltip, adăugați data-toggle="tooltip" de data-toggle="tooltip" atribut la un element.

Utilizați title atribut pentru a specifica textul care trebuie să fie afișat în interiorul tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Notă: Bule trebuie inițializată cu jQuery: selectați elementul specificat și apelați tooltip() metoda.

Codul de mai jos va permite toate ponturile din document:

Exemplu

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
Încearcă - l singur »

poziţionarea Bule

În mod implicit, tooltip va apărea în partea de sus a elementului.

Utilizați o data-placement de data-placement atribut pentru a stabili poziția tooltip pe partea de sus, de jos, stânga sau dreapta a elementului:

Exemplu

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Încearcă - l singur »

Sfat: puteți utiliza , de asemenea, o data-placement de "auto" data-placement atribut cu o valoare de "auto" , care va permite browser - ul să decidă 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.


Finalizarea Bootstrap Tooltip de referință

Pentru o referință completă a tuturor opțiunilor tooltip, metode și evenimente, du - te la nostru Bootstrap JS Tooltip de referință .