Tooltip (información sobre herramientas)

Muestra información de ayuda al pasar el cursor (hover) sobre un elemento.

Uso básico

Posiciones y formas de activación

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

export default function Demo() {
  return (
    <>
      <LhTooltip content="Sugerencia superior" placement="top">
        <LhButton>Arriba</LhButton>
      </LhTooltip>
      <LhTooltip content="Se activa al hacer clic" trigger="click">
        <LhButton>Clic</LhButton>
      </LhTooltip>
      <LhTooltip content="Sugerencia con color semántico" type="success">
        <LhButton>Color semántico</LhButton>
      </LhTooltip>
    </>
  )
}

Props de Tooltip

Prop	Descripción	Tipo	Opciones	Predeterminado
content	Contenido de la sugerencia	string	—	—
placement	Posición de visualización	LhTooltipPlacement	top / bottom / left / right (incluye -start / -end)	'top'
trigger	Forma de activación	'hover' | 'click' | 'focus'	—	'hover'
disabled	Desactiva la sugerencia	boolean	—	false
visible	Visibilidad controlada	boolean	—	—
defaultVisible	Visibilidad predeterminada no controlada	boolean	—	false
showAfter / openDelay	Retraso de aparición (ms, alias mutuos)	number	—	0
hideAfter / closeDelay	Retraso de ocultación (ms, alias mutuos)	number	—	0
effect	Tema	'dark' | 'light'	—	'dark'
type	Tipo de color semántico (sobrescribe el color de fondo de effect)	'primary' | 'success' | 'warning' | 'danger' | 'info'	—	—
bgColor	Color de fondo personalizado (sobrescribe effect y type)	string	—	—
maxWidth	Ancho máximo	string | number	—	'200px'
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Propiedad abreviada de diseño (se aplica al activador)	SxProps	—	—

Eventos de Tooltip

Evento	Descripción	Firma del callback	Equivalente en Vue
onVisibleChange	Cambio de visibilidad (se dispara tanto en modo controlado como no controlado)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — elemento raíz del activador. LhTooltipInstance expone show() / hide() / toggle().

Control simplificado

A diferencia de plus, esta biblioteca no tiene interruptor manual: basta pasar visible para que sea controlado, y onVisibleChange avisa al exterior. Consulta la guía de migración.

Repliegue al desplazar

Cuando el activador sale del viewport (zona visible), la sugerencia se repliega automáticamente (onScrollOut), para evitar que una capa fija quede flotando sobre el contenido de la página.

Estilos

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