JS Tooltip (tooltip.js)
Le plugin Tooltip est petite boîte de pop-up qui apparaît lorsque l'utilisateur déplace le pointeur de la souris sur un élément.
Pour un tutoriel sur infobulles, lisez notre Bootstrap Tooltip Tutorial .
Via data-* Attributs
Les data-toggle="tooltip" active l'infobulle.
Le title attribut spécifie le texte qui doit être affiché dans l'info - bulle.
Exemple
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Essayez - le vous - même » Via JavaScript
Les infobulles ne sont pas des plugins CSS uniquement, et doivent donc être initialisés avec jQuery: sélectionnez l'élément spécifié et appeler l' tooltip() méthode.
Exemple
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Essayez - le vous - même » options de tooltip
Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l' option pour de data- , comme dans les data-placement="" .
| prénom | Type | Défaut | La description | Essayez-le |
|---|---|---|---|---|
| animation | boolean | true | Indique si vous souhaitez ajouter un effet de transition CSS de fondu lors de l'affichage et de cacher l'infobulle
| Essayez - le |
| récipient | chaîne de caractères, ou le faux booléen | faux | Ajoute l'infobulle à un élément spécifique. Exemple: conteneur: 'body' | Essayez - le |
| delay | number, or object | 0 | Indique le nombre de millisecondes qu'il faudra pour afficher et masquer l'info-bulle. Pour spécifier un délai pour montrer et un autre pour se cacher, utiliser la structure de l'objet: delay: {show: 500, hide: 100} - qui prendra 500 ms pour montrer l' tooltip - tooltip , mais seulement 100 ms pour le cacher | Essayez - le |
| html | boolean | false | Indique si elle accepte les balises HTML dans l'infobulle:
Lorsque la valeur false (par défaut), jQuery's text() méthode sera utilisée. Utilisez cette option si vous êtes inquiet au sujet des attaques XSS | Essayez - le |
| placement | string | "top" | Indique la position de l'infobulle. Valeurs possibles:
| Essayez - le |
| selector | string, or the boolean false | false | Ajoute l'infobulle à un sélecteur spécifié | Essayez - le |
| template | string | HTML de base à utiliser lors de la création de l'infobulle. Le titre de l'infobulle sera inséré dans l'élément ayant la classe .tooltip-inner et l'élément avec la classe .tooltip-arrow deviendra la flèche de l'infobulle. L'élément d'enveloppe la plus externe devrait avoir la .tooltip classe. | ||
| title | string | "" | Indique le texte qui doit être affiché dans l'infobulle | Essayez - le |
| trigger | string | "hover focus" | Indique comment l'infobulle est déclenchée. Valeurs possibles:
| Essayez - le |
| viewport | string, or object | {selector: "body", padding: 0} | Maintient l'infobulle dans les limites de cet élément. Exemple: viewport: '#viewport' ou {selector: '#viewport', padding: 0} |
Méthodes tooltip
Le tableau suivant répertorie les méthodes de infobulles tous disponibles.
| méthode | La description | Essayez-le |
|---|---|---|
| .tooltip( options ) | Active l'infobulle avec une option. Voir options ci-dessus pour les valeurs valides | Essayez - le |
| .tooltip("show") | Affiche l'info-bulle | Essayez - le |
| .tooltip("hide") | Hides l'infobulle | Essayez - le |
| .tooltip("toggle") | Inverse l'infobulle | Essayez - le |
| .tooltip("destroy") | Cuirs et détruit l'infobulle | Essayez - le |
Evénements tooltip
Le tableau suivant répertorie les événements de infobulles tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| show.bs.tooltip | Survient quand l'infobulle est sur le point d'être montré | Essayez - le |
| shown.bs.tooltip | Survient quand l'infobulle est entièrement représentée (après transitions CSS ont terminé) | Essayez - le |
| hide.bs.tooltip | Survient quand l'infobulle est sur le point d'être caché | Essayez - le |
| hidden.bs.tooltip | Survient quand l'infobulle est entièrement caché (après les transitions CSS ont terminé) | Essayez - le |
Exemples
Personnalisé Tooltip Conception
Utilisez CSS pour personnaliser l'apparence de l'info-bulle:
Exemple
/* 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;
} Essayez - le vous - même »