Bootstrap - Plug-in d'info-bulle

Les info-bulles sont utiles lorsque vous devez décrire un lien. Le plugin a été inspiré par le plugin jQuery.tipsy écrit par Jason Frame . Les info-bulles ont depuis été mises à jour pour fonctionner sans images, s'animer avec une animation CSS et des attributs de données pour le stockage local des titres.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin tooltip.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure bootstrap.js ou le bootstrap.min.js minifié .

Usage

Le plugin tooltip génère du contenu et du balisage à la demande et place par défaut des info-bulles après leur élément déclencheur. Vous pouvez ajouter des info-bulles des deux manières suivantes:

Via data attributes - Pour ajouter une info-bulle, ajoutez data-toggle = "tooltip"à une balise d'ancrage. Le titre de l'ancre sera le texte d'une info-bulle. Par défaut, l'info-bulle est placée en haut par le plugin.

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

Via JavaScript - Déclenchez l'info-bulle via JavaScript -

$('#identifier').tooltip(options)

Le plugin Tooltip n'est PAS seulement des plugins css comme dropdown ou d'autres plugins discutés dans les chapitres précédents. Pour utiliser ce plugin, vous DEVEZ l'activer en utilisant jquery (lire javascript). Pour activer toutes les info-bulles sur votre page, utilisez simplement ce script -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Options

Certaines options peuvent être ajoutées via l'API Bootstrap Data ou appelées via JavaScript. Le tableau suivant répertorie les options -

Nom de l'option	Type / Valeur par défaut	Nom d'attribut de données	La description
animation	booléen Valeur par défaut: true	animation de données	Applique une transition de fondu CSS à l'info-bulle.
html	booléen Valeur par défaut: false	données-html	Insère du HTML dans l'info-bulle. Si false, la méthode text de jQuery sera utilisée pour insérer du contenu dans le dom. Utilisez du texte si vous vous inquiétez des attaques XSS.
placement	chaîne \| fonction Par défaut: haut	placement de données	Spécifie comment positionner l'info-bulle (c'est-à-dire, haut \| bas \| gauche \| droite \| auto). Lorsque auto est spécifié, il réoriente dynamiquement l'info-bulle. Par exemple, si le placement est "auto gauche", l'info-bulle s'affiche à gauche lorsque cela est possible, sinon elle s'affiche à droite.
sélecteur	chaîne Par défaut: faux	sélecteur de données	Si un sélecteur est fourni, les objets d'info-bulle seront délégués aux cibles spécifiées.
Titre	chaîne \| fonction Par défaut: "	titre-données	L'option title est la valeur de titre par défaut si l' attribut title n'est pas présent.
déclencheur	string Par défaut: 'hover focus'	déclencheur de données	Définit la manière dont l'info-bulle est déclenchée: click\| hover \| focus \| manual. Vous pouvez passer plusieurs déclencheurs; séparez-les par un espace.
contenu	chaîne \| fonction Par défaut: ''	contenu de données	Valeur de contenu par défaut si l' attribut de contenu de données n'est pas présent
retard	nombre \| objet Par défaut: 0	délai de données	Retards d'affichage et de masquage de l'info-bulle en ms - ne s'applique pas au type de déclenchement manuel. Si un nombre est fourni, un délai est appliqué aux deux masquer / afficher. La structure de l'objet est - `delay: { show: 500, hide: 100 }`
récipient	chaîne \| false Par défaut: false	conteneur de données	Ajoute l'info-bulle à un élément spécifique. Exemple: container: 'body'

Méthodes

Voici quelques méthodes utiles pour les info-bulles -

Méthode	La description	Exemple
Options - .tooltip (options)	Attache un gestionnaire d'info-bulles à une collection d'éléments.	`$().tooltip(options)`
Toggle - .tooltip ('bascule')	Active / désactive l'info-bulle d'un élément.	`$('#element').tooltip('toggle')`
Show - .tooltip ('afficher')	Révèle l'info-bulle d'un élément.	`$('#element').tooltip('show')`
Hide - .tooltip ('cacher')	Masque l'info-bulle d'un élément.	`$('#element').tooltip('hide')`
Destroy - .tooltip ('détruire')	Cache et détruit l'info-bulle d'un élément.	`$('#element').tooltip('destroy')`

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin tooltip. Cet événement peut être utilisé pour se connecter à la fonction.

un événement	La description	Exemple
show.bs.tooltip	Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.	`$('#myTooltip').on('show.bs.tooltip', function () { // do something })`
montré.bs.tooltip	Cet événement est déclenché lorsque l'info-bulle a été rendue visible à l'utilisateur (attendra la fin des transitions CSS).	`$('#myTooltip').on('shown.bs.tooltip', function () { // do something })`
hide.bs.tooltip	Cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.	`$('#myTooltip').on('hide.bs.tooltip', function () { // do something })`
hidden.bs.tooltip	Cet événement est déclenché lorsque l'info-bulle a fini d'être cachée à l'utilisateur (attendra la fin des transitions CSS).	`$('#myTooltip').on('hidden.bs.tooltip', function () { // do something })`

Exemple

L'exemple suivant illustre l'utilisation du plugin d'info-bulle via des attributs de données.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>