Components
Overlay
Tooltip

Tooltip

Import statement

import { Tooltip } from "@wfp/react"

The Tooltip component is a React component designed to display additional information upon user interaction like click, hover, or focus. The information provided by the tooltip is contextual, useful, and nonessential.

Style Constants

There are two style constants available:

  • tooltipStyle: Default style for the tooltip.
  • tooltipStyleDark: Dark theme style for the tooltip.

Usage

Here’s an example of how to use the Tooltip component:

onHover Trigger

This will create a tooltip with the content "This is a tooltip" that appears at the bottom of the button when hovered over.

Editable Example

<Tooltip
  content="This is a tooltip"
  placement="bottom"
>
  <button>Hover over me!</button>
</Tooltip>;

onClick Trigger

The content appears when the button is clicked on. You cann use the trigger prop to show the content on hover or click.

Editable Example

<Tooltip trigger="click" content="This is a tooltip">
  <button>Click on me</button>
</Tooltip>;

add

Editable Example

<Tooltip
  trigger="click"
  content="This is a tooltip"
  dark
>
  <button>Click on me</button>
</Tooltip>;

Placement

Control the placement of the tooltip by using the placement prop.

'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

Internal Components

TooltipPortal: This internal component is used for rendering the tooltip in a portal if usePortal is true.

Note

The Tooltip component utilizes react-popper-tooltip for positioning and classNames for handling dynamic class names.

On this page

References