Moul UIBeta
Components

Tooltip

Documentation for the Tooltip component.

React Aria

Tooltip

Preview

Interactive

Properties

Tooltip Placement
Live Code Snippet
import { Button, Tooltip, TooltipTrigger } from '@moul-dev/ui';

export default function Example() {
  return (
    <TooltipTrigger>
      <Button variant="outline">Hover me</Button>
      <Tooltip>
        This is helper information!
      </Tooltip>
    </TooltipTrigger>
  );
}

The Tooltip component is built with React Aria and styled using StyleX.

Import

import { Tooltip } from '@moul-dev/ui';

Usage

Here is a basic example of how to use the Tooltip component:

import { Tooltip } from '@moul-dev/ui';

export default function Example() {
  return (
    <Tooltip>
      {/* Component content */}
    </Tooltip>
  );
}

Props

Tooltip Props

Prop

Type

Default className: react-aria-Tooltip

Render PropCSS Selector
isOpen
Whether the tooltip is currently open.		[data-open]
placement
The placement of the tooltip.		[data-placement]

ToggleButtonGroup

A toggle button group allows a user to toggle multiple options, with single or multiple selection.

Typography

Documentation for the Typography component.

On this page

TooltipPreviewImportUsagePropsTooltip Props