Composant d'info-bulle textuelle, affichant des informations supplémentaires au survol de la souris.

Utilisation de base

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Utilisation de base -->
  <LhTooltip content="Ceci est une info-bulle">
    <LhButton>Survoler pour afficher l'info-bulle</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Utilisation de base -->
  <LhTooltip content="Ceci est une info-bulle">
    <LhButton>Survoler pour afficher l'info-bulle</LhButton>
  </LhTooltip>
</template>

Positions

vue

<script setup lang="ts">
</script>

<template>
  <!-- Haut -->
  <LhTooltip content="Info-bulle en haut" placement="top">
    <LhButton>Haut</LhButton>
  </LhTooltip>
  <!-- Bas -->
  <LhTooltip content="Info-bulle en bas" placement="bottom">
    <LhButton>Bas</LhButton>
  </LhTooltip>
  <!-- Gauche -->
  <LhTooltip content="Info-bulle à gauche" placement="left">
    <LhButton>Gauche</LhButton>
  </LhTooltip>
  <!-- Droite -->
  <LhTooltip content="Info-bulle à droite" placement="right">
    <LhButton>Droite</LhButton>
  </LhTooltip>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Haut -->
  <LhTooltip content="Info-bulle en haut" placement="top">
    <LhButton>Haut</LhButton>
  </LhTooltip>
  <!-- Bas -->
  <LhTooltip content="Info-bulle en bas" placement="bottom">
    <LhButton>Bas</LhButton>
  </LhTooltip>
  <!-- Gauche -->
  <LhTooltip content="Info-bulle à gauche" placement="left">
    <LhButton>Gauche</LhButton>
  </LhTooltip>
  <!-- Droite -->
  <LhTooltip content="Info-bulle à droite" placement="right">
    <LhButton>Droite</LhButton>
  </LhTooltip>
</template>

Délai personnalisé

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Affichée après un délai de 1 s -->
  <LhTooltip content="Affichée après 1 seconde" :show-after="1000">
    <LhButton>Info-bulle différée</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Affichée 300 ms après l'entrée, masquée 500 ms après la sortie" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Affichée après un délai de 1 s -->
  <LhTooltip content="Affichée après 1 seconde" :show-after="1000">
    <LhButton>Info-bulle différée</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Affichée 300 ms après l'entrée, masquée 500 ms après la sortie" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

Internationalisation

Le texte de l'info-bulle peut être internationalisé via LhConfigProvider associé aux paquets linguistiques.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- Changer de paquet linguistique via ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTooltip, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- Changer de paquet linguistique via ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Mise en page rapide sx

La propriété sx permet d'ajuster rapidement les espacements et les dimensions de la racine du déclencheur, sans écrire de CSS supplémentaire.

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Mise en page sx -->
  <LhTooltip content="sx s'applique à la racine du déclencheur" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Marge supérieure 2, marge gauche 2</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Mise en page sx -->
  <LhTooltip content="sx s'applique à la racine du déclencheur" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Marge supérieure 2, marge gauche 2</LhButton>
  </LhTooltip>
</template>

sx repose sur une base 8px : mt: 2 → marginTop: 16px, ml: 2 → marginLeft: 16px. Pour la liste complète des propriétés, voir Mise en page rapide sx.

Déclenchement et état

trigger définit le mode de déclenchement ; disabled désactive l'info-bulle ; manual combiné à visible permet un contrôle manuel de l'affichage ; hideAfter contrôle le masquage différé.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhTooltip, LhButton } from '@lh-ui/vue3'

const manualVisible = ref(false)
</script>

<template>
  <!-- Déclenchement au clic -->
  <LhTooltip content="Déclenchement au clic" trigger="click">
    <LhButton>Déclenchement au clic</LhButton>
  </LhTooltip>
  <!-- Déclenchement au focus -->
  <LhTooltip content="Déclenchement au focus" trigger="focus">
    <LhButton>Déclenchement au focus</LhButton>
  </LhTooltip>
  <!-- Info-bulle désactivée -->
  <LhTooltip content="Info-bulle désactivée" disabled>
    <LhButton type="info" disabled>Désactivée</LhButton>
  </LhTooltip>
  <!-- Contrôle manuel -->
  <LhTooltip content="Contrôle manuel" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Bascule manuelle</LhButton>
  </LhTooltip>
  <!-- Masquage différé -->
  <LhTooltip content="Masquée après 1 seconde" :hide-after="1000">
    <LhButton>Masquage différé</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
  data() {
    return {
      manualVisible: false,
    }
  },
}
</script>

<template>
  <!-- Déclenchement au clic -->
  <LhTooltip content="Déclenchement au clic" trigger="click">
    <LhButton>Déclenchement au clic</LhButton>
  </LhTooltip>
  <!-- Déclenchement au focus -->
  <LhTooltip content="Déclenchement au focus" trigger="focus">
    <LhButton>Déclenchement au focus</LhButton>
  </LhTooltip>
  <!-- Info-bulle désactivée -->
  <LhTooltip content="Info-bulle désactivée" disabled>
    <LhButton type="info" disabled>Désactivée</LhButton>
  </LhTooltip>
  <!-- Contrôle manuel -->
  <LhTooltip content="Contrôle manuel" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Bascule manuelle</LhButton>
  </LhTooltip>
  <!-- Masquage différé -->
  <LhTooltip content="Masquée après 1 seconde" :hide-after="1000">
    <LhButton>Masquage différé</LhButton>
  </LhTooltip>
</template>

openDelay / closeDelay sont respectivement des alias de showAfter / hideAfter, utilisables selon votre préférence.

Thème et apparence

effect bascule entre le thème clair et sombre, bgColor personnalise la couleur de fond, maxWidth limite la largeur maximale et teleportTarget indique le point de montage de la couche flottante.

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Thème sombre -->
  <LhTooltip content="Thème sombre" effect="dark">
    <LhButton>Thème sombre</LhButton>
  </LhTooltip>
  <!-- Thème clair -->
  <LhTooltip content="Thème clair" effect="light">
    <LhButton>Thème clair</LhButton>
  </LhTooltip>
  <!-- Couleur de fond personnalisée -->
  <LhTooltip content="Couleur de fond personnalisée" bg-color="#5a3fa8">
    <LhButton>Couleur de fond personnalisée</LhButton>
  </LhTooltip>
  <!-- Largeur maximale -->
  <LhTooltip content="Ce texte est assez long pour être limité par maxWidth à 160px et passer à la ligne" :max-width="160">
    <LhButton>Largeur maximale 160px</LhButton>
  </LhTooltip>
  <!-- Point de montage personnalisé -->
  <LhTooltip content="Couche flottante montée sur #app" teleport-target="#app">
    <LhButton>Point de montage personnalisé</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Thème sombre -->
  <LhTooltip content="Thème sombre" effect="dark">
    <LhButton>Thème sombre</LhButton>
  </LhTooltip>
  <!-- Thème clair -->
  <LhTooltip content="Thème clair" effect="light">
    <LhButton>Thème clair</LhButton>
  </LhTooltip>
  <!-- Couleur de fond personnalisée -->
  <LhTooltip content="Couleur de fond personnalisée" bg-color="#5a3fa8">
    <LhButton>Couleur de fond personnalisée</LhButton>
  </LhTooltip>
  <!-- Largeur maximale -->
  <LhTooltip content="Ce texte est assez long pour être limité par maxWidth à 160px et passer à la ligne" :max-width="160">
    <LhButton>Largeur maximale 160px</LhButton>
  </LhTooltip>
  <!-- Point de montage personnalisé -->
  <LhTooltip content="Couche flottante montée sur #app" teleport-target="#app">
    <LhButton>Point de montage personnalisé</LhButton>
  </LhTooltip>
</template>

Props

Prop	Description	Type	Valeur par défaut
content	Contenu de l'info-bulle	`string`	`''`
placement	Position de l'info-bulle	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`'top'`
trigger	Mode de déclenchement	`"hover" \| "click" \| "focus"`	`'hover'`
disabled	Désactivé	`boolean`	`false`
manual	Contrôle manuel de l'affichage	`boolean`	`false`
visible	État d'affichage en contrôle manuel	`boolean`	—
showAfter	Délai d'affichage (ms)	`number`	`0`
hideAfter	Délai de masquage (ms)	`number`	`0`
openDelay	Délai d'affichage (ms), alias de showAfter	`number`	—
closeDelay	Délai de fermeture	`number`	—
effect	Thème	`"dark" \| "light"`	`'dark'`
type	Type de couleur de thème intégrée (remplace la couleur de fond de effect)	`"primary" \| "success" \| "warning" \| "danger" \| "info"`	—
bgColor	Couleur de fond personnalisée (remplace la couleur de fond de effect et de type)	`string`	—
maxWidth	Largeur maximale	`string \| number`	`'200px'`
teleportTarget	Cible du Teleport (sélecteur ou élément, body par défaut)	`string \| HTMLElement`	`'body'`
themeVars	Variables de thème au niveau du composant, prioritaires sur la configuration de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Motif de fond au niveau du composant, prioritaire sur la configuration de ConfigProvider	`string`	—
sx	Propriétés de mise en page rapide sx (appliquées à la racine du déclencheur)	`LhSxProps`	—

Remarque : la valeur 'click' de trigger n'est pas encore implémentée (comportement identique à 'hover'), la bascule au clic sera proposée dans une version ultérieure.

Slots

Slot	Description
default	Élément déclencheur de l'info-bulle (le contenu de l'info-bulle se définit via la propriété `content`)

Methods

Les méthodes exposées par le composant sont accessibles via ref :

Méthode	Description
show	Affiche immédiatement l'info-bulle
hide	Masque immédiatement l'info-bulle
toggle	Bascule l'état d'affichage de l'info-bulle

Accessibilité

La couche flottante embarque un role="tooltip" ; à l'affichage, la racine du déclencheur reçoit automatiquement un aria-describedby pointant vers la couche flottante, supprimé au masquage afin de ne laisser aucune référence dangling
Accessible au clavier : avec les déclenchements hover / focus, l'entrée du focus clavier sur le déclencheur (focusin) affiche également l'info-bulle, masquée à la sortie du focus, conformément au modèle de tooltip des WAI-ARIA APG ; le déclenchement click ne réagit pas au focus
Le déclencheur doit contenir un élément focusable (bouton, lien) ; un simple texte ne peut pas recevoir le focus clavier et l'info-bulle serait alors inaccessible aux utilisateurs du clavier

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/tooltip/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

LhTooltipPlacement

/**
 * Types de Tooltip
 */
export type LhTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'

LhTooltipTrigger

export type LhTooltipTrigger = 'hover' | 'click' | 'focus'

LhTooltipEffect

export type LhTooltipEffect = 'dark' | 'light'

LhTooltipType

export type LhTooltipType = 'primary' | 'success' | 'warning' | 'danger' | 'info'

LhTooltipProps

/**
 * Props du composant Tooltip
 */
export interface LhTooltipProps {
  /** Contenu du texte de l'info-bulle */
  content?: string
  /** Position d'affichage */
  placement?: LhTooltipPlacement
  /** Mode de déclenchement */
  trigger?: LhTooltipTrigger
  /** Désactivé */
  disabled?: boolean
  /** Contrôle manuel de l'affichage */
  manual?: boolean
  /** État d'affichage en contrôle manuel */
  visible?: boolean
  /** Délai d'affichage (ms) */
  showAfter?: number
  /** Délai de masquage (ms) */
  hideAfter?: number
  /** Délai d'affichage (ms), alias de showAfter */
  openDelay?: number
  /** Délai de fermeture */
  closeDelay?: number
  /** Thème */
  effect?: LhTooltipEffect
  /** Type de couleur de thème intégrée (remplace la couleur de fond de effect) */
  type?: LhTooltipType
  /** Couleur de fond personnalisée (remplace la couleur de fond de effect et de type) */
  bgColor?: string
  /** Largeur maximale */
  maxWidth?: string | number
  /** Cible du Teleport (sélecteur ou élément, body par défaut) */
  teleportTarget?: string | HTMLElement
  /** Variables de thème au niveau du composant, prioritaires sur la configuration de ConfigProvider */
  themeVars?: Record<string, string>
  /** Motif de fond au niveau du composant, prioritaire sur la configuration de ConfigProvider */
  bgPattern?: string
  /** Propriétés de mise en page rapide sx (appliquées à la racine du déclencheur) */
  sx?: LhSxProps
}

Tooltip (infobulle)

Utilisation de base

Positions

Délai personnalisé

Internationalisation

Mise en page rapide sx

Déclenchement et état

Thème et apparence

Tooltip API

Props

Slots

Methods

Accessibilité

Définitions de types

Tooltip (infobulle) ​

Utilisation de base ​

Positions ​

Délai personnalisé ​

Internationalisation ​

Mise en page rapide sx ​

Déclenchement et état ​

Thème et apparence ​

Tooltip API ​

Props ​

Slots ​

Methods ​

Accessibilité ​

Définitions de types ​

Tooltip (infobulle)

Utilisation de base

Positions

Délai personnalisé

Internationalisation

Mise en page rapide sx

Déclenchement et état

Thème et apparence

Tooltip API

Props

Slots

Methods

Accessibilité

Définitions de types