# Tooltip Mensaje breve que aparece al pasar el cursor o enfocar un elemento. Aclara su función sin ocupar espacio en la interfaz. ```tsx import { Tooltip } from "@/components/ui/tooltip"; Guardar ``` ## Default ### Cuándo usar - Aclarar el propósito de un botón icono o un control compacto. - Revelar el nombre completo de un valor truncado. - Mostrar atajos de teclado o ayuda contextual breve. ### Cuándo no usarlo - Para información esencial: hazla visible directamente. - Si requiere interacción dentro del contenido: usa un popover. - Si el texto es largo: prefiere un panel de detalles o un modal. ## Placements ### Posición del tooltip El tooltip puede aparecer en cuatro direcciones principales. Elige la que no tape contenido relevante; **top** es el predeterminado en la mayoría de casos. ```tsx Arriba Derecha Abajo Izquierda ``` ## Trigger click ### Aparece al hacer clic Cuando el tooltip confirma una acción puntual (por ejemplo, copiar), muéstralo manualmente al hacer clic y ocúltalo automáticamente pasados unos segundos. ```tsx // Tooltip que se muestra al hacer clic (copia al portapapeles). const [open, setOpen] = useState(false); { setOpen(true); setTimeout(() => setOpen(false), 1400); }} > Copiar RUT ``` ## Accesibilidad ### Teclado y foco - El tooltip aparece tanto en hover como con foco por teclado (Tab). - Esc lo cierra sin perder el foco del control que lo dispara. - Nunca pongas controles interactivos dentro de un tooltip; usa popover para eso. - Asegura contraste mínimo AA entre el texto y el fondo del tooltip. ## Contenido ### Texto breve y directo - Una sola línea, sin punto final. - Empieza con verbo si describe una acción ('Guardar cambios'). - Si describe un estado, empieza con sustantivo ('Última edición: ayer'). - No repitas literalmente el label visible del control.