Tooltip (infobulle)

Affiche fréquemment une information d'aide lors du survol de l'élément par le pointeur.

Utilisation de base

Positions et modes de déclenchement

import { LhButton, LhTooltip } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhTooltip content="Infobulle du haut" placement="top">
        <LhButton>En haut</LhButton>
      </LhTooltip>
      <LhTooltip content="Déclenchement au clic" trigger="click">
        <LhButton>Clic</LhButton>
      </LhTooltip>
      <LhTooltip content="Infobulle de couleur sémantique" type="success">
        <LhButton>Sémantique</LhButton>
      </LhTooltip>
    </>
  )
}

Tooltip Props

Prop	Description	Type	Options	Valeur par défaut
content	Contenu de l'infobulle	string	—	—
placement	Position d'affichage	LhTooltipPlacement	top / bottom / left / right (avec -start / -end)	'top'
trigger	Mode de déclenchement	'hover' | 'click' | 'focus'	—	'hover'
disabled	Désactive l'infobulle	boolean	—	false
visible	Visibilité contrôlée	boolean	—	—
defaultVisible	Visibilité par défaut (non contrôlée)	boolean	—	false
showAfter / openDelay	Délai d'affichage (ms, alias l'un de l'autre)	number	—	0
hideAfter / closeDelay	Délai de masquage (ms, alias l'un de l'autre)	number	—	0
effect	Thème	'dark' | 'light'	—	'dark'
type	Type de couleur sémantique (recouvre la couleur de fond de effect)	'primary' | 'success' | 'warning' | 'danger' | 'info'	—	—
bgColor	Couleur de fond personnalisée (recouvre effect et type)	string	—	—
maxWidth	Largeur maximale	string | number	—	'200px'
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page (appliqué au déclencheur)	SxProps	—	—

Événements de Tooltip

Événement	Description	Signature du callback	Équivalent Vue
onVisibleChange	Changement de visibilité (déclenché en mode contrôlé comme en mode non contrôlé)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — l'élément racine du déclencheur. LhTooltipInstance expose show() / hide() / toggle().

Contrôle simplifié

Contrairement à lh-ui-plus, cette bibliothèque n'a pas d'interrupteur manual : passer visible suffit à rendre le composant contrôlé, et le callback onVisibleChange en informe la logique externe. Voir le Guide de migration.

Refermeture au défilement

Lorsque le déclencheur sort du viewport, l'infobulle se referme automatiquement (onScrollOut) afin d'éviter qu'une surcouche en fixed ne flotte au-dessus du contenu de la page.

Styles

import '@lh-ui/react/style/tooltip'