Hint

Explain an existing control with a tooltip.

New conversation

View code

import { Hint } from "@stack/ui/hint";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Hint.Label content="Start a new conversation">
      <Button variant="outline">New conversation</Button>
    </Hint.Label>
  );
}

Usage

import { Hint } from "@stack/ui/hint";
import { Button } from "@/components/ui/button";

Use a tooltip for short labels. Put essential instructions in visible text.

Interactive popover

Use a popover when the explanation contains a link or another interactive control.

About context

View code

import { Hint } from "@stack/ui/hint";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Hint.Root kind="popover">
      <Hint.Trigger
        openOnHover={false}
        render={<Button variant="outline">About context</Button>}
      />
      <Hint.Content>
        <Hint.Title>Context window</Hint.Title>
        <Hint.Description>
          The context window includes your messages and the assistant’s replies.
        </Hint.Description>
        <a href="/components/context-usage/">See context usage</a>
      </Hint.Content>
    </Hint.Root>
  );
}

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

Hint.Root

Prop	Type	Required	Description
kind	"tooltip" | "popover"	Yes	Select tooltip or popover behavior. Props for each behavior follow the corresponding Base UI root.
defaultOpen	boolean	No	Whether the tooltip is initially open.
open	boolean	No	Controlled open state.
onOpenChange	((open: boolean, eventDetails: TooltipPrimitive.Root.ChangeEventDetails) => void) | ((open: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => void)	No	Event handler called when the tooltip is opened or closed.
onOpenChangeComplete	((open: boolean) => void) | ((open: boolean) => void)	No	Event handler called after any animations complete when the tooltip is opened or closed.
disableHoverablePopup	boolean	No	Whether the tooltip contents can be hovered without closing the tooltip.
trackCursorAxis	"none" | "both" | "x" | "y"	No	Determines which axis the tooltip should track the cursor on.
actionsRef	RefObject<TooltipRootActions | null> | RefObject<PopoverRootActions | null>	No	A ref to imperative actions. - unmount: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.
disabled	boolean	No	Disable interaction.
handle	PopoverPrimitive.Handle<unknown> | TooltipPrimitive.Handle<unknown>	No	A handle to associate the tooltip with a trigger.
children	ReactNode | PayloadChildRenderFunction<unknown>	No	Content rendered inside the component.
triggerId	string | null	No	ID of the trigger that the tooltip is associated with.
defaultTriggerId	string | null	No	ID of the trigger that the tooltip is associated with.
modal	boolean | "trap-focus"	No	Determines if the popover enters a modal state when open. - true: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled. - false: user interaction with the rest of the document is allowed. - 'trap-focus': focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.

Hint.Trigger

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
disabled	boolean	No	Disable interaction.
closeOnClick	boolean	No	Whether the tooltip should close when this trigger is clicked.
closeDelay	number	No	How long to wait before closing the tooltip.
delay	number	No	How long to wait before opening the tooltip on hover. Default: 150.
render	ReactElement<unknown, string | JSXElementConstructor<any>>	No	Replace the underlying element using render composition.
className	string	No	Additional CSS classes for the underlying element.
style	CSSProperties	No	Inline styles for the underlying element.
openOnHover	boolean	No	Open the hint when the trigger is hovered. Default: true.

Hint.Content

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
align	Align	No	Alignment of the component. Default: "center".
alignOffset	number | OffsetFunction	No	Additional offset along the alignment axis in pixels. Default: 0.
side	Side	No	Side on which the popup or panel appears. Default: "top".
sideOffset	number | OffsetFunction	No	Distance between the anchor and the popup in pixels. Default: 8.

Hint.Title

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Hint.Description

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

Hint.Label

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties	No	Inline styles for the underlying element.
className	string	No	Additional CSS classes for the underlying element.
disabled	boolean	No	Disable interaction.
closeOnClick	boolean	No	Whether the tooltip should close when this trigger is clicked.
closeDelay	number	No	How long to wait before closing the tooltip.
delay	number	No	How long to wait before opening the tooltip on hover.
openOnHover	boolean	No	Open the hint when the trigger is hovered.
content	ReactNode	Yes	Content displayed by the component.
children	ReactElement<unknown, string | JSXElementConstructor<any>>	Yes	Content rendered inside the component.
contentProps	HintContentProps	No	Props forwarded to the hint content.