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>