Superposiciones

Tooltip

Una línea de texto que aclara un control, en hover y en foco.

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "sebs7n-ui/tooltip"

Ejemplos

Una línea, en hover y en foco

El `aria-label` del botón sigue siendo obligatorio: el tooltip no es un nombre accesible.

import { Button } from "sebs7n-ui/button"
import { CopyIcon } from "lucide-react"
import { Tooltip, TooltipContent, TooltipTrigger } from "sebs7n-ui/tooltip"

function Basico() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip>
        <TooltipTrigger render={<Button aria-label="Copiar al portapapeles" size="icon-md" variant="outline" />}>
          <CopyIcon />
        </TooltipTrigger>
        <TooltipContent>Copiar al portapapeles</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger render={<Button variant="ghost" />}>Arriba</TooltipTrigger>
        <TooltipContent side="right">También abre con Tab</TooltipContent>
      </Tooltip>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Hereda las props de Tooltip.Root.

Sin props propias: pasa todo al primitivo.

TooltipContent

Hereda las props de Tooltip.Popup y Tooltip.Positioner.

Prop	Tipo	Por defecto	Descripción
`align`	`"center" \| "start" \| "end"`	`"center"`	How to align the popup relative to the specified side.
`alignOffset`	`number \| OffsetFunction`	`0`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
`side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"`	`"top"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`sideOffset`	`number \| OffsetFunction`	`6`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
`className`	`string`	—

TooltipProvider

Hereda las props de Tooltip.Provider.

Prop	Tipo	Por defecto	Descripción
`delay`	`number`	`300`	How long to wait before opening the tooltip on hover. Specified in milliseconds.

TooltipTrigger

Hereda las props de Tooltip.Trigger.

Sin props propias: pasa todo al primitivo.

Teclado

Tab: Enfocar el trigger lo muestra.
Escape: Lo cierra.

Accesibilidad

No sirve como nombre accesible. Un botón de ícono necesita aria-label igual: en un celular el tooltip no existe.
Aparece con foco de teclado, no solo con mouse.
TooltipProvider va una vez en el layout raíz; delay por defecto, 300 ms.

Reglas de uso

Una línea. Si necesita dos, es un Popover.
Nunca contenido interactivo adentro: no se puede llegar con el teclado.
No lo pongas en algo que ya dice lo que hace.

Relacionados

Popover Button Kbd