El Tooltip es un componente informativo que muestra contenido breve y contextual al interactuar con un elemento de la interfaz. Su objetivo es brindar aclaraciones, definiciones o ayuda adicional sin interrumpir el flujo principal del usuario ni ocupar espacio permanente en la pantalla.
Top · Bottom · Left · Right
Importa los estilos base y los sub-componentes del Tooltip para comenzar a utilizarlo.
1import 'nave-ui-library/styles.css'2import { Tooltip, TooltipTrigger, TooltipContent } from 'nave-ui-library/react'El Tooltip básico se activa al hacer hover sobre el trigger. Incluye una flecha posicionada automáticamente.
Puedes controlar la ubicación del contenido usando la propiedad side.
Controla la alineación del tooltip relativa al trigger con la prop align.
Los Tooltips pueden envolver cualquier componente, como Avatares para mostrar nombres de usuario.
Combinaciones completas de side y align para referencia rápida.
| Side / Align | Start | Center | End |
|---|---|---|---|
top | |||
bottom | |||
left | |||
right |
Todas las props disponibles para TooltipContent.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controla visibilidad del tooltip en modo controlado. |
defaultOpen | boolean | false | Estado inicial del tooltip (modo no controlado). |
onOpenChange | (open: boolean) => void | — | Callback al cambiar el estado de visibilidad. |
side | 'top' | 'right' | 'bottom' | 'left' | top | Preferred side of the trigger where the tooltip will be displayed. |
sideOffset | number | 4 | Distance in pixels from the trigger to the tooltip content. |
align | 'start' | 'center' | 'end' | center | Alignment of the tooltip content relative to the trigger. |
children | ReactNode | — | Contenido textual o breve del tooltip. |
asChild | boolean | false | Merge props into child element instead of rendering a wrapper (TooltipTrigger). |
childrenreq | ReactNode | — | Contenido del tooltip. |
1{2 "name": "Tooltip",3 "description": "Tooltip para mostrar información contextual al pasar el mouse.",4 "component": "Tooltip",5 "subcomponents": [6 "TooltipTrigger",7 "TooltipContent"8 ],9 "files": [10 "components/base/data-display/overlays/Tooltip.tsx"11 ],12 "dependencies": [13 "react",14 "@radix-ui/react-tooltip"15 ],16 "props": {17 "open": {18 "type": "boolean",19 "description": "Controla visibilidad del tooltip en modo controlado."20 },21 "defaultOpen": {22 "type": "boolean",23 "default": false,24 "description": "Estado inicial del tooltip (modo no controlado)."25 },26 "onOpenChange": {27 "type": "(open: boolean) => void",28 "description": "Callback al cambiar el estado de visibilidad."29 },30 "side": {31 "type": "'top' | 'right' | 'bottom' | 'left'",32 "default": "top",33 "description": "Preferred side of the trigger where the tooltip will be displayed."34 },35 "sideOffset": {36 "type": "number",37 "default": 4,38 "description": "Distance in pixels from the trigger to the tooltip content."39 },40 "align": {41 "type": "'start' | 'center' | 'end'",42 "default": "center",43 "description": "Alignment of the tooltip content relative to the trigger."44 },45 "children": {46 "type": "ReactNode",47 "required": true,48 "description": "Contenido textual o breve del tooltip."49 }50 },51 "states": {52 "closed": {},53 "open": {}54 }55}