Tooltip
Este componente esta construido sobre SPopover. Consultalo para la API subyacente de posicionamiento y comportamiento.
Uso
STooltip envuelve cualquier elemento y muestra un tooltip con el texto especificado en title al pasar el cursor. Está construido sobre SPopover y soporta posicionamiento, temas de color y flechas.
Color
Usa la prop color para cambiar el tema del tooltip. Los valores disponibles son 'auto' (se adapta al modo oscuro), 'dark' y 'light'.
Posición
Usa la prop placement para controlar dónde aparece el tooltip relativo al elemento envuelto.
Desplazamiento
Usa la prop offset para controlar la distancia en pixeles entre el elemento disparador y el tooltip.
Control manual
Establece manual en true para desactivar la apertura/cierre automatico al pasar el cursor. Luego usa los metodos expuestos (open(), close(), toggle()) mediante un template ref para controlar el tooltip programaticamente.
Metodos expuestos
Al usar un template ref en STooltip, los siguientes metodos estan disponibles:
| Metodo | Descripcion |
|---|---|
open() | Abre el tooltip |
close() | Cierra el tooltip |
toggle() | Alterna el estado abierto/cerrado del tooltip |
focus() | Enfoca el elemento popover subyacente |
isOpen | Ref reactivo que indica si el tooltip esta actualmente abierto |
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title | string | - | Texto mostrado en el tooltip |
color | 'dark' | 'light' | 'auto' | - | Tema de color del tooltip |
placement | Placement | 'bottom' | Posición del tooltip relativo al elemento envuelto |
arrow | boolean | true | Si se muestra una flecha que apunta al elemento |
offset | number | - | Distancia en píxeles entre el elemento y el tooltip |
static | boolean | - | Desactiva el volteo automático cuando el tooltip se desbordaría del viewport |
manual | boolean | - | Desactiva la apertura/cierre automático con hover. Usa los métodos expuestos open()/close() para control manual |
Slots
| Nombre | Descripción |
|---|---|
default | El elemento que activa el tooltip al pasar el cursor |