Tooltip

Hover-triggered informational overlay. Shows on hover, hides on leave.

Examples

Basic tooltip

Tooltip appears above the trigger on hover.

Different positions

Static previews of top, right, bottom, and left tooltip placements.

With delay text

Multiple buttons each with their own tooltip label.

Hover each button. The tooltip appears after a short delay.

Rich content

Custom tooltip with a title, description, and badge tags.

With Keyboard Shortcut

Disabled Button

Tooltip on a disabled button. Wraps in a span to capture hover.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Tooltip } from "@rokle/components";

import { Tooltip, Button } from "@rokle/components";

export function Example() {
  return (
    <Tooltip content="This is helpful information">
      <Button variant="secondary">Hover me</Button>
    </Tooltip>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
content	string	-	Tooltip text.
children	ReactNode	-	Trigger element.

Previous← Popover