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 en utiliser un bootstrap.bundle.min.jsqui contient Popper.
• Les popovers nécessitent le plugin popover comme 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.

Exemples

Activer les popovers

Comme mentionné ci-dessus, vous devez initialiser les popovers avant de pouvoir les utiliser. Une façon d'initialiser tous les popovers sur une page serait de les sélectionner par leur data-bs-toggleattribut, comme ceci :

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Démo en direct

Nous utilisons JavaScript similaire à l'extrait ci-dessus pour afficher le popover en direct suivant. Les titres sont définis via data-bs-titleet le contenu du corps est défini via data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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 : haut, droite, bas et gauche. Les directions sont mises en miroir lors de l'utilisation de Bootstrap dans RTL. Réglez data-bs-placementpour changer la direction.

<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>

Personnalisécontainer

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. Ceci est courant dans les tableaux réactifs, les groupes d'entrée, etc.

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

Une autre situation où vous souhaiterez définir une personnalisation explicite containerconcerne les popovers dans une boîte de dialogue modale , pour vous assurer que le popover lui-même est ajouté au modal. Ceci est particulièrement important pour les popovers qui contiennent des éléments interactifs - les dialogues modaux piégeront le focus, donc à moins que le popover ne soit un élément enfant du modal, les utilisateurs ne pourront pas focaliser ou activer ces éléments interactifs.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Popovers personnalisés

Vous pouvez personnaliser l'apparence des popovers à l'aide de variables CSS . Nous définissons une classe personnalisée avec data-bs-custom-class="custom-popover"pour définir notre apparence personnalisée et l'utiliser pour remplacer certaines des variables CSS locales.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

variables

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les popovers utilisent désormais des variables CSS locales .popoverpour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Variables SSS

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Usage

Activez les popovers via JavaScript :

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

Choix

Comme les options peuvent être transmises via des attributs de données ou JavaScript, vous pouvez ajouter un nom d'option à data-bs-, comme dans data-bs-animation="{value}". 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, utilisez à la data-bs-custom-class="beautifier"place de data-bs-customClass="beautifier".

Depuis Bootstrap 5.2.0, tous les composants prennent en charge un attribut de données expérimentaldata-bs-config réservé pouvant héberger une configuration de composant simple sous forme de chaîne JSON. Lorsqu'un élément a des attributs data-bs-config='{"delay":0, "title":123}'et , la valeur finale sera et les attributs de données séparés remplaceront les valeurs données sur . De plus, les attributs de données existants peuvent héberger des valeurs JSON telles que .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Utilisation de la fonction avecpopperConfig

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

Méthodes

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Événements

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