Bootstrap - Plugin Popover

Le popover est similaire à l'info-bulle, offrant une vue étendue avec un titre. Pour que le popover s'active, il suffit à un utilisateur de placer le curseur sur l'élément. Le contenu du popover peut être entièrement rempli à l'aide de l'API Bootstrap Data. Cette méthode nécessite une info-bulle.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du popover.jset il a une dépendance du plugin tooltip . Sinon, comme mentionné dans le chapitre Présentation des plugins d'amorçage , vous pouvez inclure bootstrap.js ou le fichier bootstrap.min.js minifié .

Usage

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

  • Via data attributes - Pour ajouter un popover, ajoutez data-toggle = "popover"à une balise d'ancrage / bouton. Le titre de l'ancre sera le texte d'un popover. Par défaut, le popover est placé en haut par le plugin.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Activez les popovers via JavaScript en utilisant la syntaxe suivante -

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

Le plugin Popover 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 tous les popovers sur votre page, utilisez simplement ce script -

$(function () { $("[data-toggle = 'popover']").popover(); });

Exemple

L'exemple suivant montre l'utilisation du plugin popover via des attributs de données.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</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 au popover.
html Valeur booléenne par défaut - false données-html Insère du HTML dans le popover. 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 le popover (c'est-à-dire, haut | bas | gauche | droite | auto). Lorsque auto est spécifié, il réoriente dynamiquement le popover. Par exemple, si le placement est "auto gauche", le popover s'affichera à gauche si possible, sinon il s'affichera à droite.
sélecteur chaîne Par défaut - faux sélecteur de données Si un sélecteur est fourni, les objets popover 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 comment le popover est déclenché - click| hover | focus | manual. Vous pouvez passer plusieurs déclencheurs; séparez-les par un espace.
retard nombre | objet Par défaut - 0 délai de données

Retards d'affichage et de masquage du popover 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 le popover à un élément spécifique. Exemple: container: 'body'

Méthodes

Voici quelques méthodes utiles pour le popover -

Méthode La description Exemple

Options - .popover (options)

Attache un gestionnaire de popover à une collection d'éléments.
$().popover(options)

Toggle - .popover ('bascule')

Active ou désactive le popover d'un élément.
$('#element').popover('toggle')

Show - .popover ('afficher')

Révèle le popover d'un élément.
$('#element').popover('show')

Hide - .popover ('cacher')

Masque le popover d'un élément.
$('#element').popover('hide')

Destroy - .popover ('détruire')

Cache et détruit le popover d'un élément.
$('#element').popover('destroy')

Exemple

L'exemple suivant montre les méthodes du plugin popover -

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Événements

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

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

Exemple

L'exemple suivant montre les événements du plugin Popover -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

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