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>