Overlays & Tooltips

Tooltip

Short hint on hover or focus.

Import

tsx

import { Tooltip } from "@cronus-ui/ui";

bash

npx cronus-ui add tooltip

Examples

On a button

A small label revealed on hover or focus, mounted inside a shared provider.

tsx

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon" aria-label="Add to library">
        <Plus aria-hidden="true" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">
        <HelpCircle aria-hidden="true" />
        Need help?
      </Button>
    </TooltipTrigger>
    <TooltipContent>We usually reply within minutes.</TooltipContent>
  </Tooltip>
</TooltipProvider>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TooltipDefault layout:inline style:tooltip {
  label "Need help?"
  text "We usually reply within minutes."
}

page "/audit/tooltip/default" type:custom {
  use TooltipDefault
}

API Reference

Generated from the component's exported types.

TooltipProviderProps

Extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>

Prop	Type	Default	Description
`delayDuration`	`number`	—	Default open delay for nested tooltips.
`skipDelayDuration`	`number`	—	Grace period when moving between tooltips.
`disableHoverableContent`	`boolean`	—	—

TooltipProps

Extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`delayDuration`	`number`	—	—
`disableHoverableContent`	`boolean`	—	—

TooltipTriggerProps

Extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

TooltipContentProps

Extends ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.
`aria-label`	`string`	—	—