popovers

Aperçu

Choses à savoir lors de l'utilisation du plugin popover :

• Les popovers s'appuient sur la bibliothèque tierce Popper pour le positionnement. Vous devez inclure popper.min.js avant bootstrap.js ou utiliser bootstrap.bundle.min.js/ bootstrap.bundle.jsqui contient Popper pour que les popovers fonctionnent !
• Les popovers nécessitent le plug -in d'info-bulle en tant que dépendance.
• Les popovers sont opt-in pour des raisons de performances, vous devez donc les initialiser vous -même .
• La longueur nulle titleet contentles valeurs n'afficheront jamais de popover.
• Spécifiez container: 'body'pour éviter les problèmes de rendu dans des composants plus complexes (comme nos groupes d'entrée, groupes de boutons, etc.).
• Le déclenchement de popovers sur des éléments cachés ne fonctionnera pas.
• Les popovers pour les éléments .disabledor disableddoivent être déclenchés sur un élément wrapper.
• Lorsqu'ils sont déclenchés à partir d'ancres qui s'étendent sur plusieurs lignes, les popovers seront centrés entre la largeur globale des ancres. Utilisez .text-nowrapsur votre <a>s pour éviter ce comportement.
• Les popovers doivent être masqués avant que leurs éléments correspondants ne soient supprimés du DOM.
• Les popovers peuvent être déclenchés grâce à un élément à l'intérieur d'un DOM shadow.

Continuez à lire pour voir comment les popovers fonctionnent avec quelques exemples.

Exemple : Activer les popovers partout

Une façon d'initialiser tous les popovers sur une page serait de les sélectionner par leur data-bs-toggleattribut :

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Exemple : Utilisation de l' containeroption

Lorsque vous avez des styles sur un élément parent qui interfèrent avec un popover, vous voudrez spécifier une coutume containerafin que le HTML du popover apparaisse dans cet élément à la place.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Exemple

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Quatre directions

Quatre options sont disponibles : aligné en haut, à droite, en bas et à gauche. Les directions sont mises en miroir lors de l'utilisation de Bootstrap dans RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Ignorer au prochain clic

Utilisez le focusdéclencheur pour fermer les popovers au prochain clic de l'utilisateur sur un élément différent de l'élément bascule.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Éléments désactivés

Les éléments avec l' disabledattribut ne sont pas interactifs, ce qui signifie que les utilisateurs ne peuvent pas les survoler ou cliquer dessus pour déclencher un popover (ou une info-bulle). Comme solution de contournement, vous souhaiterez déclencher le popover à partir d'un wrapper <div>ou <span>, idéalement rendu focusable au clavier à l'aide de tabindex="0".

Pour les déclencheurs de popover désactivés, vous pouvez également préférer data-bs-trigger="hover focus"que le popover apparaisse comme un retour visuel immédiat pour vos utilisateurs, car ils ne s'attendent peut-être pas à cliquer sur un élément désactivé.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Toupet

variables

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Usage

Activez les popovers via JavaScript :

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Choix

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-bs-, comme dans data-bs-animation="". Assurez-vous de changer le type de casse du nom de l'option de camelCase à kebab-case lors du passage des options via les attributs de données. Par exemple, au lieu d'utiliser data-bs-customClass="beautifier", utilisez data-bs-custom-class="beautifier".

Utilisation de la fonction avecpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Méthodes

Afficher

Révèle le popover d'un élément. Retourne à l'appelant avant que le popover n'ait été affiché (c'est-à-dire avant que l' shown.bs.popoverévénement ne se produise). Ceci est considéré comme un déclenchement "manuel" du popover. Les popovers dont le titre et le contenu sont tous les deux de longueur nulle ne sont jamais affichés.

myPopover.show()

cacher

Masque le popover d'un élément. Retourne à l'appelant avant que le popover n'ait été masqué (c'est-à-dire avant que l' hidden.bs.popoverévénement ne se produise). Ceci est considéré comme un déclenchement "manuel" du popover.

myPopover.hide()

basculer

Bascule le popover d'un élément. Revient à l'appelant avant que le popover n'ait été réellement affiché ou masqué (c'est-à-dire avant que l' événement shown.bs.popoverou ne hidden.bs.popoverse produise). Ceci est considéré comme un déclenchement "manuel" du popover.

myPopover.toggle()

disposer

Masque et détruit le popover d'un élément (supprime les données stockées sur l'élément DOM). Les popovers qui utilisent la délégation (créés à l'aide de l' selectoroption ) ne peuvent pas être détruits individuellement sur les éléments déclencheurs descendants.

myPopover.dispose()

activer

Donne au popover d'un élément la possibilité d'être affiché. Les popovers sont activés par défaut.

myPopover.enable()

désactiver

Supprime la possibilité d'afficher le popover d'un élément. Le popover ne pourra s'afficher que s'il est réactivé.

myPopover.disable()

toggleEnabled

Active/désactive la possibilité d'afficher ou de masquer le popover d'un élément.

myPopover.toggleEnabled()

mettre à jour

Met à jour la position du popover d'un élément.

myPopover.update()

getInstance

Méthode statique qui permet d'obtenir l'instance popover associée à un élément DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Méthode statique qui permet d'obtenir l'instance popover associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Événements

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})