Derniers tutoriels de développement web
 

Bootstrap JS Popover

❮ Précédent Suivant Référence ❯

JS Popover (popover.js)

Le Popover plugin est similaire à infobulles; il est une boîte de pop-up qui apparaît lorsque l'utilisateur clique sur un élément. La différence est que le popover peut contenir beaucoup plus de contenu.

Dépendance Plugin: Popovers nécessitent le plugin infobulle (tooltip.js) à inclure dans votre version de Bootstrap .

Pour un tutoriel sur Popovers , lisez notre Bootstrap Popover Tutorial .

Via data-* Attributs

Les data-toggle="popover" active le popover .

Le title attribut spécifie le texte d' en- tête de l' popover .

Les data-content de popover's data-content attribut spécifie le texte qui doit être affiché à l' intérieur du popover's corps.

Exemple

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Essayez - le vous - même »

Via JavaScript

Popovers ne sont pas des plugins CSS uniquement, et doivent donc être initialisés avec jQuery: sélectionnez l'élément spécifié et appelez le popover() méthode.

Exemple

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Essayez - le vous - même »

Popover options

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
animationbooleantrue

Indique si vous souhaitez ajouter un effet de transition CSS fondu lors de l' ouverture et la fermeture du popover

  • true - Ajouter un effet de fondu
  • false - Ne pas ajouter un effet de fondu
Essayez - le
containerstring, or the boolean falsefalse Ajoute la popover à un élément spécifique.
Exemple: conteneur: 'body' 		Essayez - le
contentstring"" Indique le texte à l' intérieur du popover's body Essayez - le
delaynumber, or object0 Indique le nombre de millisecondes qu'il faudra pour ouvrir et fermer le popover .

Pour spécifier un délai pour l'ouverture et un autre pour la fermeture, utilisez la structure de l'objet:

delay: {show: 500, hide: 100} - qui prendra 500 ms pour ouvrir le popover , mais seulement 100 ms pour la fermer 		Essayez - le
htmlbooleanfalse Indique si elle accepte les balises HTML dans le popover :
  • true - Accepter les balises HTML
  • false - Ne pas accepter les balises HTML
Remarque: Le code HTML doit être inséré dans l'attribut title (ou en utilisant l'option de titre).

Lorsque la valeur false (par défaut), jQuery text() méthode sera utilisée. Utilisez cette option si vous êtes inquiet au sujet des attaques XSS 		Essayez - le
placementstring"right" Indique le popover poste. Valeurs possibles:

  • "top" - Popover sur le dessus
  • "bottom" - Popover sur le fond
  • "left" - Popover sur la gauche
  • "right" - Popover à droite
  • "auto" - Permet au navigateur de décider de la position du popover . Par exemple, si la valeur est "auto left" , l' popover affichera sur le côté gauche lorsque cela est possible, sinon sur la droite. Si la valeur est "auto bottom" en popover "auto bottom" l' "auto bottom" , l' popover affiche au bas lorsque cela est possible, sinon sur le dessus
Essayez - le
selectorstring, or the boolean falsefalse Ajoute le popover à un sélecteur spécifié Essayez - le
templatestring  HTML de base à utiliser lors de la création du popover.

Le popover's le titre sera injecté dans le .popover-titre.

Le popover's contenu sera injecté dans le .popover contenu.

.arrow deviendra le popover's la flèche.

L'élément d'enveloppe la plus externe devrait avoir la .popover classe.
titlestring"" Indique le texte d' en- tête de l' popover Essayez - le
triggerstring"click" Indique comment la popover est déclenchée. Valeurs possibles:

  • "click" - Déclencher le popover avec un clic
  • "hover" - Déclencher le popover sur le vol stationnaire
  • "focus" - Déclencher le popover quand il obtient le focus (par tabulation ou en cliquant sur .eg)
  • "manual" - Déclencher le popover manuellement
Astuce: Pour passer plusieurs valeurs, séparez avec un espace 		Essayez - le
viewportstring, or object{selector: "body", padding: 0} Maintient le popover dans les limites de cet élément.

Exemple: viewport: '#viewport' ou {selector: '#viewport', padding: 0}

Popover Méthodes

Le tableau suivant répertorie tous disponibles popover méthodes.

méthode La description Essayez-le
.popover( options ) Active le popover avec une option. Voir options ci-dessus pour les valeurs valides Essayez - le
.popover("show") Affiche le popover Essayez - le
.popover("hide") Masque le popover Essayez - le
.popover("toggle") Alterne le popover Essayez - le
.popover("destroy") Cuirs et détruit l'popover Essayez - le

Popover Events

Le tableau suivant répertorie tous disponibles popover événements.

un événement La description Essayez-le
show.bs.popover Survient lorsque le popover est sur le point d'être montré Essayez - le
shown.bs.popover Survient lorsque le popover est entièrement représenté (après transitions CSS ont terminé) Essayez - le
hide.bs.popover Survient lorsque le popover est sur le point d'être caché Essayez - le
hidden.bs.popover Survient lorsque le popover est entièrement caché (après les transitions CSS ont terminé) Essayez - le
Exemples

Exemples

Personnalisé Popover Conception

Utilisez CSS pour personnaliser l'apparence de l' popover :

Exemple

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
Essayez - le vous - même »

❮ Précédent Suivant Référence ❯