Tooltip: HextaUI y shadcn/ui

El Tooltip de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	7	4
Props que gestiona el envoltorio	28	5
Líneas de código	349	65
Dependencias de npm	`@base-ui/react@^1.8.0cn`	`cn`
Construido con	`theme`	–

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Partes

Solo en HextaUITooltipPortalTooltipArrowTooltipGroup

En ambosTooltipProviderTooltipTooltipTriggerTooltipContent

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`portalProps`TooltipContent	Como container o keepMounted.

La versión de HextaUI

import {
  IconArrowBackUp,
  IconArrowForwardUp,
  IconShare2,
  IconTrash,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
import { TooltipGroup, TooltipTrigger } from "@/components/ui/tooltip"

export function TooltipDemo() {
  return (
    <TooltipGroup>
      <div className="flex items-center gap-1">
        <TooltipTrigger
          content={
            <>
              Undo
              <Kbd keys="mod+z" />
            </>
          }
          render={<Button variant="ghost" size="icon" aria-label="Undo" />}
        >
          <IconArrowBackUp />
        </TooltipTrigger>
        <TooltipTrigger
          content={
            <>
              Redo
              <Kbd keys="mod+shift+z" />
            </>
          }
          render={<Button variant="ghost" size="icon" aria-label="Redo" />}
        >
          <IconArrowForwardUp />
        </TooltipTrigger>
        <TooltipTrigger
          content="Share"
          render={<Button variant="ghost" size="icon" aria-label="Share" />}
        >
          <IconShare2 />
        </TooltipTrigger>
        <TooltipTrigger
          content="Move to trash"
          render={
            <Button variant="ghost" size="icon" aria-label="Move to trash" />
          }
        >
          <IconTrash />
        </TooltipTrigger>
      </div>
    </TooltipGroup>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

9 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/tooltip.json --overwrite

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.