Tooltip

El uso más común: decir qué hace un IconButton. Aparece al pasar el ratón, tras 150 ms (delay), o al momento al llegar con Tab; el foco que deja un clic no lo abre, y Esc lo cierra sin cerrar el modal que haya debajo. Al recorrer una barra de iconos, el siguiente sale sin retardo ni animación, y hay un margen para llevar el ratón al globo sin que se vaya.

El hijo tiene que poder recibir foco, o quien navega con teclado nunca lo verá. El tooltip no sustituye al label del botón: el lector de pantalla lee ese nombre, y el texto del tooltip le llega como descripción (aria-describedby) en el botón interno.

El texto puede ir en la prop content o en el slot content. Con SSR (Next), usa el slot con su id y role="tooltip": con la prop, el componente añade un nodo propio al DOM antes de que React hidrate, y React regenera la página entera (hueco del kit). En una página que solo se pinta en el cliente, content="Archivar" basta.

side es una preferencia: si no cabe, voltea al lado contrario, y en móvil un lateral pasa arriba o abajo. Va en la top layer, así que ni una tabla con scroll horizontal ni un contenedor con overflow-hidden lo recortan.

Una aclaración que ayuda pero no hace falta para decidir: qué entra en una media, de dónde sale un total. Si sin ese texto alguien puede equivocarse (un recargo, una condición de cancelación), no va en un tooltip: va escrito en la pantalla.

El slot content admite marcado, como la negrita de aquí. Nunca pongas enlaces ni botones: deja de existir en cuanto el ratón sale. Si el contenido se tiene que poder pulsar, es un Popover.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).