Componente de información sobre herramientas de texto, que muestra información adicional al pasar el cursor del ratón.

Uso básico

vue

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

<template>
  <!-- Uso básico -->
  <LhTooltip content="Esta es una información de ayuda">
    <LhButton>Pasa el cursor para ver la pista</LhButton>
  </LhTooltip>
</template>

vue

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

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

<template>
  <!-- Uso básico -->
  <LhTooltip content="Esta es una información de ayuda">
    <LhButton>Pasa el cursor para ver la pista</LhButton>
  </LhTooltip>
</template>

Posiciones

vue

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

<template>
  <!-- Arriba -->
  <LhTooltip content="Pista superior" placement="top">
    <LhButton>Arriba</LhButton>
  </LhTooltip>
  <!-- Abajo -->
  <LhTooltip content="Pista inferior" placement="bottom">
    <LhButton>Abajo</LhButton>
  </LhTooltip>
  <!-- Izquierda -->
  <LhTooltip content="Pista izquierda" placement="left">
    <LhButton>Izquierda</LhButton>
  </LhTooltip>
  <!-- Derecha -->
  <LhTooltip content="Pista derecha" placement="right">
    <LhButton>Derecha</LhButton>
  </LhTooltip>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Arriba -->
  <LhTooltip content="Pista superior" placement="top">
    <LhButton>Arriba</LhButton>
  </LhTooltip>
  <!-- Abajo -->
  <LhTooltip content="Pista inferior" placement="bottom">
    <LhButton>Abajo</LhButton>
  </LhTooltip>
  <!-- Izquierda -->
  <LhTooltip content="Pista izquierda" placement="left">
    <LhButton>Izquierda</LhButton>
  </LhTooltip>
  <!-- Derecha -->
  <LhTooltip content="Pista derecha" placement="right">
    <LhButton>Derecha</LhButton>
  </LhTooltip>
</template>

Retraso personalizado

vue

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

<template>
  <!-- Se muestra con 1 s de retraso -->
  <LhTooltip content="Se muestra con 1 segundo de retraso" :show-after="1000">
    <LhButton>Pista retardada</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Se muestra 300 ms después de entrar y se oculta 500 ms después de salir" :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>
  <!-- Se muestra con 1 s de retraso -->
  <LhTooltip content="Se muestra con 1 segundo de retraso" :show-after="1000">
    <LhButton>Pista retardada</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Se muestra 300 ms después de entrar y se oculta 500 ms después de salir" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

Internacionalización

El texto de la pista se puede internacionalizar combinando LhConfigProvider con los paquetes de idioma.

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>
  <!-- Cambio de paquete de idioma mediante 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>
  <!-- Cambio de paquete de idioma mediante 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>

Diseño rápido con sx

La propiedad sx permite ajustar rápidamente los márgenes y el tamaño del elemento raíz del disparador, sin necesidad de escribir CSS adicional.

vue

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

<template>
  <!-- Márgenes con sx -->
  <LhTooltip content="sx se aplica al elemento raíz del disparador" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Margen superior 2, margen izquierdo 2</LhButton>
  </LhTooltip>
</template>

vue

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

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

<template>
  <!-- Márgenes con sx -->
  <LhTooltip content="sx se aplica al elemento raíz del disparador" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Margen superior 2, margen izquierdo 2</LhButton>
  </LhTooltip>
</template>

sx se basa en una retícula de 8px: mt: 2 → marginTop: 16px, ml: 2 → marginLeft: 16px. Consulta Diseño rápido con sx para la lista completa de propiedades.

Métodos de activación y estados

trigger especifica el método de activación; disabled deshabilita la pista; manual combinado con visible controla la visualización de forma manual; hideAfter controla el retraso del ocultado.

vue

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

const manualVisible = ref(false)
</script>

<template>
  <!-- Se activa al hacer clic -->
  <LhTooltip content="Se activa al hacer clic" trigger="click">
    <LhButton>Activar al hacer clic</LhButton>
  </LhTooltip>
  <!-- Se activa al enfocar -->
  <LhTooltip content="Se activa al enfocar" trigger="focus">
    <LhButton>Activar al enfocar</LhButton>
  </LhTooltip>
  <!-- Pista deshabilitada -->
  <LhTooltip content="Pista deshabilitada" disabled>
    <LhButton type="info" disabled>Pista deshabilitada</LhButton>
  </LhTooltip>
  <!-- Control manual -->
  <LhTooltip content="Control manual" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Conmutar manualmente</LhButton>
  </LhTooltip>
  <!-- Ocultar con retraso -->
  <LhTooltip content="Se oculta tras 1 segundo de retraso" :hide-after="1000">
    <LhButton>Ocultar con retraso</LhButton>
  </LhTooltip>
</template>

vue

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

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

<template>
  <!-- Se activa al hacer clic -->
  <LhTooltip content="Se activa al hacer clic" trigger="click">
    <LhButton>Activar al hacer clic</LhButton>
  </LhTooltip>
  <!-- Se activa al enfocar -->
  <LhTooltip content="Se activa al enfocar" trigger="focus">
    <LhButton>Activar al enfocar</LhButton>
  </LhTooltip>
  <!-- Pista deshabilitada -->
  <LhTooltip content="Pista deshabilitada" disabled>
    <LhButton type="info" disabled>Pista deshabilitada</LhButton>
  </LhTooltip>
  <!-- Control manual -->
  <LhTooltip content="Control manual" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Conmutar manualmente</LhButton>
  </LhTooltip>
  <!-- Ocultar con retraso -->
  <LhTooltip content="Se oculta tras 1 segundo de retraso" :hide-after="1000">
    <LhButton>Ocultar con retraso</LhButton>
  </LhTooltip>
</template>

openDelay / closeDelay son respetivamente alias de showAfter / hideAfter; puedes usar los que prefieras.

Tema y apariencia

effect alterna entre el tema claro y oscuro, bgColor personaliza el color de fondo, maxWidth limita el ancho máximo y teleportTarget indica dónde se monta la capa emergente.

vue

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

<template>
  <!-- Tema oscuro -->
  <LhTooltip content="Tema oscuro" effect="dark">
    <LhButton>Tema oscuro</LhButton>
  </LhTooltip>
  <!-- Tema claro -->
  <LhTooltip content="Tema claro" effect="light">
    <LhButton>Tema claro</LhButton>
  </LhTooltip>
  <!-- Color de fondo personalizado -->
  <LhTooltip content="Color de fondo personalizado" bg-color="#5a3fa8">
    <LhButton>Color de fondo personalizado</LhButton>
  </LhTooltip>
  <!-- Ancho máximo -->
  <LhTooltip content="Este texto es largo y gracias a maxWidth se ajusta automáticamente en barras de 160 px" :max-width="160">
    <LhButton>Ancho máximo 160 px</LhButton>
  </LhTooltip>
  <!-- Punto de montaje personalizado -->
  <LhTooltip content="Capa emergente montada en #app" teleport-target="#app">
    <LhButton>Punto de montaje personalizado</LhButton>
  </LhTooltip>
</template>

vue

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

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

<template>
  <!-- Tema oscuro -->
  <LhTooltip content="Tema oscuro" effect="dark">
    <LhButton>Tema oscuro</LhButton>
  </LhTooltip>
  <!-- Tema claro -->
  <LhTooltip content="Tema claro" effect="light">
    <LhButton>Tema claro</LhButton>
  </LhTooltip>
  <!-- Color de fondo personalizado -->
  <LhTooltip content="Color de fondo personalizado" bg-color="#5a3fa8">
    <LhButton>Color de fondo personalizado</LhButton>
  </LhTooltip>
  <!-- Ancho máximo -->
  <LhTooltip content="Este texto es largo y gracias a maxWidth se ajusta automáticamente en barras de 160 px" :max-width="160">
    <LhButton>Ancho máximo 160 px</LhButton>
  </LhTooltip>
  <!-- Punto de montaje personalizado -->
  <LhTooltip content="Capa emergente montada en #app" teleport-target="#app">
    <LhButton>Punto de montaje personalizado</LhButton>
  </LhTooltip>
</template>

Props

Prop	Descripción	Tipo	Predeterminado
content	Contenido de la pista	`string`	`''`
placement	Posición de la pista	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`'top'`
trigger	Método de activación	`"hover" \| "click" \| "focus"`	`'hover'`
disabled	Si se deshabilita	`boolean`	`false`
manual	Si se controla la visualización de forma manual	`boolean`	`false`
visible	Estado de visualización controlado manualmente	`boolean`	—
showAfter	Retraso de visualización (ms)	`number`	`0`
hideAfter	Retraso de ocultado (ms)	`number`	`0`
openDelay	Retraso de visualización (ms), alias de showAfter	`number`	—
closeDelay	Retraso de cierre	`number`	—
effect	Tema	`"dark" \| "light"`	`'dark'`
type	Tipo de color de tema integrado (sobrescribe el color de fondo de effect)	`"primary" \| "success" \| "warning" \| "danger" \| "info"`	—
bgColor	Color de fondo personalizado (sobrescribe el color de fondo de effect y de type)	`string`	—
maxWidth	Ancho máximo	`string \| number`	`'200px'`
teleportTarget	Destino de Teleport (selector o elemento, por defecto body)	`string \| HTMLElement`	`'body'`
themeVars	Variables de tema a nivel de componente, sobrescriben la configuración de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Patrón de fondo a nivel de componente, sobrescribe la configuración de ConfigProvider	`string`	—
sx	Propiedades de diseño rápido sx (se aplican al elemento raíz del disparador)	`LhSxProps`	—

Nota: el valor 'click' de trigger aún no está implementado (el comportamiento es el mismo que 'hover'); la conmutación por clic se incorporará en una versión posterior.

Slots

Slot	Descripción
default	Elemento que dispara la pista (el contenido de la pista se establece mediante la propiedad `content`)

Métodos

A través de ref se pueden invocar los métodos expuestos por el componente:

Método	Descripción
show	Muestra la pista inmediatamente
hide	Oculta la pista inmediatamente
toggle	Conmuta el estado de visualización de la pista

Accesibilidad

La capa emergente incluye role="tooltip"; al mostrarse, el elemento raíz del disparador recibe automáticamente aria-describedby apuntando a la capa emergente y al ocultarse se elimina automáticamente, sin referencias suspendidas
Alcanzable con teclado: con los métodos de activación hover / focus, cuando el foco del teclado entra en el disparador (focusin) la pista también se muestra, y al salir el foco se oculta automáticamente, en línea con el patrón de tooltip de la APG de WAI-ARIA; el método de activación click no responde al foco
Dentro del disparador debe colocarse un elemento enfocable (como un botón o enlace); el texto sin formato no puede recibir el foco del teclado, por lo que la pista sería inalcanzable para los usuarios de teclado

Definiciones de tipos

Este componente exporta las siguientes estructuras de tipos TypeScript (extraídas automáticamente de los fuentes packages/components/tooltip/src/types.ts y @lh-ui/share/core/*; abre cada entrada para ver la definición completa; consulta la tabla de Props de arriba para la descripción de los atributos):

LhTooltipPlacement

/**
 * Tipos 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 del componente Tooltip
 */
export interface LhTooltipProps {
  /** Contenido del texto de la pista */
  content?: string
  /** Posición de visualización */
  placement?: LhTooltipPlacement
  /** Método de activación */
  trigger?: LhTooltipTrigger
  /** Si se deshabilita */
  disabled?: boolean
  /** Si se controla la visualización de forma manual */
  manual?: boolean
  /** Estado de visualización controlado manualmente */
  visible?: boolean
  /** Retraso de visualización (ms) */
  showAfter?: number
  /** Retraso de ocultado (ms) */
  hideAfter?: number
  /** Retraso de visualización (ms), alias de showAfter */
  openDelay?: number
  /** Retraso de cierre */
  closeDelay?: number
  /** Tema */
  effect?: LhTooltipEffect
  /** Tipo de color de tema integrado (sobrescribe el color de fondo de effect) */
  type?: LhTooltipType
  /** Color de fondo personalizado (sobrescribe el color de fondo de effect y de type) */
  bgColor?: string
  /** Ancho máximo */
  maxWidth?: string | number
  /** Destino de Teleport (selector o elemento, por defecto body) */
  teleportTarget?: string | HTMLElement
  /** Variables de tema a nivel de componente, sobrescriben la configuración de ConfigProvider */
  themeVars?: Record<string, string>
  /** Patrón de fondo a nivel de componente, sobrescribe la configuración de ConfigProvider */
  bgPattern?: string
  /** Propiedades de diseño rápido sx (se aplican al elemento raíz del disparador) */
  sx?: LhSxProps
}

Tooltip (información sobre herramientas)

Uso básico

Posiciones

Retraso personalizado

Internacionalización

Diseño rápido con sx

Métodos de activación y estados

Tema y apariencia

Tooltip API

Props

Slots

Métodos

Accesibilidad

Definiciones de tipos

Tooltip (información sobre herramientas) ​

Uso básico ​

Posiciones ​

Retraso personalizado ​

Internacionalización ​

Diseño rápido con sx ​

Métodos de activación y estados ​

Tema y apariencia ​

Tooltip API ​

Props ​

Slots ​

Métodos ​

Accesibilidad ​

Definiciones de tipos ​

Tooltip (información sobre herramientas)

Uso básico

Posiciones

Retraso personalizado

Internacionalización

Diseño rápido con sx

Métodos de activación y estados

Tema y apariencia

Tooltip API

Props

Slots

Métodos

Accesibilidad

Definiciones de tipos