dialogs

Tooltip

A popup that displays information related to an element.

Features

Opens when the trigger is focused or hovered.
Closes when the trigger is activated or when pressing escape.
Supports custom timing.

Links

Open in playground Open in Storybook View source ARIA design ARIA authoring

Anatomy

import { Tooltip } from "@wonderflow/react-components";

export default () => {
  return (
    <Tooltip trigger={<span tabIndex={0}>Hover me</span>}>
      This is an extended description.
    </Tooltip>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

trigger*

ReactNode

placement

enum

auto-start

open

boolean

delay

number

500

maxWidth

string

40ch

interactive

boolean

false

fill

boolean

false

Accessibility

Adheres to the tooltip role requirements.

Keyboard interactions

Name	Description
`tab`	Move focus on the trigger and open the tooltip.
`esc`	Close the tooltip