uxio/ui | Open-source UI library based on shadcn

Extended Features

AutoTooltip composes trigger and content. With mode="auto", it opens only when the trigger is truncated (overflow hidden / ellipsis).

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/tooltip

For Base UI, wrap your app (or a subtree) with TooltipProvider from the same module when you use the low-level Tooltip / TooltipTrigger / TooltipContent primitives so delay and grouping behave as expected. AutoTooltip wraps an inner provider for its own delay.

Usage

AutoTooltip wraps a single trigger element and supports truncation-based mode, content / htmlContent, delay, placement, offset, appendTo, and className on the tooltip content.

import { Button } from "@/components/ui/button"
import { AutoTooltip } from "@/components/ui/tooltip"

export function AutoTooltipExample() {
  return (
    <AutoTooltip
      content="Opens on hover"
      mode="always"
      delay={200}
      placement="top"
      offset={10}
      className="max-w-sm"
    >
      <Button type="button" variant="outline">
        Hover me
      </Button>
    </AutoTooltip>
  )
}

AutoTooltip props

AutoTooltip accepts a single React element as children (the trigger). It measures that DOM node to decide whether the tooltip may open when mode is "auto".

Prop	Type	Default	Description
`children`	`React.ReactElement`	—	Trigger element; must forward a ref to a DOM node (e.g. `asChild` patterns work with primitives like `Button`).
`content`	`string`	—	Plain-text tooltip body. Ignored if `htmlContent` is set.
`htmlContent`	`React.ReactNode`	—	Rich tooltip body. Takes precedence over `content`.
`mode`	`"auto"` \| `"always"`	`"auto"`	`"auto"`: open only if the trigger is truncated (scroll size larger than client size). `"always"`: tooltip may open whenever there is content.
`delay`	`number`	`250`	Delay before open (ms), forwarded to `TooltipProvider`.
`offset`	`number`	—	Distance from the trigger; passed as `sideOffset` to `TooltipContent`.
`placement`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	—	Preferred side of the tooltip.
`appendTo`	`HTMLElement` \| `null`	—	Optional portal container for the tooltip content. When omitted, the default portal target is used.
`className`	`string`	—	Extra classes merged onto `TooltipContent` (in addition to `max-w-xs`).

If neither content nor htmlContent is provided, AutoTooltip returns children unchanged (no tooltip).

Examples

Auto mode

The tooltip appears only when the label is truncated. A second line that fully fits does not open a tooltip.

This label is intentionally long so it truncates inside a narrow container and the tooltip only appears then.

Short label

Always mode

The tooltip can open even when the full trigger text fits.