Popover (fenêtre contextuelle)

Calque d'information déclenché au clic ou au survol. 12 positions, quatre modes de déclenchement, flèche et largeur paramétrables.

Fenêtre contextuelle

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="Titre" content="Déclenchement au clic (par défaut)" placement="top">
        <LhButton>click en haut</LhButton>
      </LhPopover>
      <LhPopover content="Déclenchement au clic" placement="right" trigger="click">
        <LhButton>click à droite</LhButton>
      </LhPopover>
      <LhPopover content="Déclenchement au focus" placement="bottom" trigger="focus">
        <LhButton>focus en bas</LhButton>
      </LhPopover>
      <LhPopover content="Sans flèche + largeur personnalisée" placement="left" :arrow="false" :width="240">
        <LhButton>Sans flèche, à gauche</LhButton>
      </LhPopover>
      <LhPopover content="Positionnement left strict" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">Le déclenchement manual s'associe à :visible.sync pour un contrôle manuel ; disabled empêche l'affichage ; popperClass définit une classe personnalisée.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="Contrôlée par le bouton de bascule" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">Bascule manual ({{ manual ? 'ouvert' : 'fermé' }})</LhButton>
      </LhPopover>
      <LhPopover content="État désactivé" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="Affichage/masquage retardés" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
placement	Position d'affichage	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	Inversion de direction lorsque l'espace manque sur l'axe principal (activé par défaut) ; à false, le positionnement suit strictement placement, avec débordement de la fenêtre possible	boolean	true
trigger	Mode de déclenchement	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	Titre	string	—
visible	État d'affichage contrôlé manuellement (:visible.sync)	boolean	—
disabled	Désactivé	boolean	false
arrow	Affiche la flèche	boolean	true
width	Largeur du calque flottant	string \| number	—
popperClass	Classe personnalisée du calque flottant	string	—
teleportTarget	Cible de montage du calque flottant (sélecteur ou élément, body par défaut ; 2.7 n'a pas de Teleport, déplacement assuré par l'hôte)	string \| HTMLElement	—
showAfter	Délai d'affichage (ms)	number	—
hideAfter	Délai de masquage (ms)	number	—
themeVars	Variables de thème au niveau du composant, surcharge la configuration du ConfigProvider	Record<string, string>	—
bgPattern	Motif de fond au niveau du composant, surcharge la configuration du ConfigProvider	string	—
sx	Raccourci de mise en page sx (appliqué à la racine du déclencheur)	—	—

Slots

Slot	Description
default	Déclencheur
title	Zone de titre (prop title par défaut)
content	Corps de la bulle (prop content si non transmis)