Tooltip (infobulle)

Infobulle déclenchée au survol / au clic / au focus. Positionnement fixed + basculement dans la fenêtre d'affichage (flip/shift) ; lorsque le déclencheur défile hors de la fenêtre, l'infobulle se referme automatiquement.

Infobulle

<template>
  <div class="demo-row" style="justify-content: center; padding: 56px 0 72px">
    <LhTooltip content="Infobulle au-dessus" placement="top">
      <LhButton>Haut</LhButton>
    </LhTooltip>
    <LhTooltip content="Infobulle en dessous" placement="bottom">
      <LhButton>Bas</LhButton>
    </LhTooltip>
    <LhTooltip content="Infobulle à gauche" placement="left">
      <LhButton>Gauche</LhButton>
    </LhTooltip>
    <LhTooltip content="Infobulle à droite" placement="right">
      <LhButton>Droite</LhButton>
    </LhTooltip>
    <LhTooltip content="Déclenchement au clic" trigger="click">
      <LhButton type="primary">Clic</LhButton>
    </LhTooltip>
    <LhTooltip content="Positionnement strict sur top, sans basculement" placement="top" :flip="false">
      <LhButton>Strict top</LhButton>
    </LhTooltip>
    <LhTooltip content="Infobulle dans la couleur du thème" type="primary">
      <LhButton>Couleur du thème</LhButton>
    </LhTooltip>
  </div>
</template>

Props

Prop	Description	Type	Valeur par défaut
content	Contenu de l'infobulle	string	''
placement	12 positions	'top' \| 'top-start' \| … \| 'right-end'	'top'
flip	Retourne la direction lorsque l'espace sur l'axe principal est insuffisant ; avec false, le placement est strictement respecté	boolean	true
trigger	Mode de déclenchement	'hover' \| 'click' \| 'focus'	'hover'
manual / visible	Mode contrôlé manuellement	boolean	false / —
showAfter / hideAfter	Délais d'affichage / de masquage (ms)	number	0
openDelay / closeDelay	Alias des délais (synonymes de showAfter/hideAfter, priorité plus basse)	number	—
effect	Thème clair / sombre	'dark' \| 'light'	'dark'
type	Couleur de thème intégrée (surcharge le fond de effect)	'primary' \| 'success' \| …	—
bgColor	Couleur de fond personnalisée (priorité la plus haute)	string	—
maxWidth	Largeur maximale	string \| number	'200px'
teleportTarget	Cible de montage de l'infobulle (déplacement dans le DOM)	string \| HTMLElement	'body'
disabled / themeVars / bgPattern / sx	—	—	—

Events

L'affichage et le masquage sont gérés en interne par la logique de déclenchement.

Méthodes

En mode manual, utilisez les méthodes d'instance show() / hide() / toggle() (defineExpose).

Astuce

sx s'applique à l'élément racine du déclencheur (le popper étant monté sur body, sx ne s'y applique pas).