Tooltip

Installation#

npmpnpmyarnbun

npx sugarcoat add tooltip

Examples#

Default#

Default

Colors#

Tooltips support multiple color schemes.

Colors

With Arrow#

Add an arrow pointing to the trigger element.

With Arrow

Shadow#

Tooltips support different shadow levels.

Shadow

Positioning#

Control tooltip placement relative to the trigger.

Positioning

Delay#

Control the show and hide delay.

Delay

Icon Button

Multiline Content#

Multiline

Anatomy#

<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger>
      <button>Trigger</button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Positioner>
        <Tooltip.Popup>
          <Tooltip.Arrow />
          Content
        </Tooltip.Popup>
      </Tooltip.Positioner>
    </Tooltip.Portal>
  </Tooltip>
</Tooltip.Provider>

Usage#

Import

import { Tooltip } from "@sugarcoat/ui-nxt";

Usage

<Tooltip.Provider>
<Tooltip color="default">
  <Tooltip.Trigger>
    <button>Hover me</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Positioner side="top">
      <Tooltip.Popup>
        <Tooltip.Arrow />
        Tooltip content
      </Tooltip.Popup>
    </Tooltip.Positioner>
  </Tooltip.Portal>
</Tooltip>
</Tooltip.Provider>

Props#

Prop	Type	Default	Description
color	"default" \| "inverse" \| "primary" \| "accent"	"default"	Color scheme for the tooltip
shadow	"none" \| "xs" \| "sm" \| "md" \| "lg"	"sm"	Box shadow elevation
delay	number	-	Delay in ms before showing tooltip
open	boolean	-	Controlled open state
defaultOpen	boolean	-	Initial open state (uncontrolled)
onOpenChange	(open: boolean) => void	-	Callback when open state changes

Tooltip.Positioner#

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"top"	Preferred side for the tooltip
align	"start" \| "center" \| "end"	"center"	Alignment along the side axis
sideOffset	number	-	Distance from the trigger

Accessibility#

Built on Base UI Tooltip for robust accessibility
Properly linked to trigger with ARIA attributes
Shows on hover and focus for keyboard users
Dismissible with Escape key
Use aria-label on icon-only triggers for screen reader context
Tooltip content is announced when displayed