Skip to content

index.mdx

Latest commit

 

History

History
89 lines (49 loc) · 2.2 KB

index.mdx

File metadata and controls

89 lines (49 loc) · 2.2 KB
title Tooltip
description A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
source packages/raystack/components/tooltip

import { playground, sideDemo, alignDemo, customDemo, providerDemo, trackCursorDemo, arrowDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Tooltip } from "@raystack/apsara";

<Tooltip.Provider>
  <Tooltip />
</Tooltip.Provider>

API Reference

Root

The Tooltip component accepts various props to customize its behavior and appearance. You can use it either as a standalone component or nested within a TooltipProvider for enhanced functionality.

Trigger

The Trigger component wraps the element that activates the tooltip.

Content

The Content component displays the tooltip content and controls positioning.

Provider

The Provider component serves as a context wrapper that provides global configuration and functionality to all tooltip instances within your application.

Examples

Side

The Tooltip Content component can be positioned in different directions using the side prop:

Align

The Tooltip Content component can be aligned in different directions using the align prop:

Custom Content

Tooltips can contain custom content using ReactNode:

With Provider

The TooltipProvider component can be used to provide a global configuration for all tooltips in your application.

Track Cursor

Use trackCursorAxis prop on the Root component to make the tooltip follow the cursor:

With Arrow

Show the arrow by setting showArrow={true} on the Content component:

Accessibility

  • Respects motion preferences: tooltip entry motion is enabled only when prefers-reduced-motion: no-preference