React Design System: component Tooltip

Tooltip

A tooltip is a lightweight popover for showing additional information during hover interactions.

Overview

API

Code

Component 'Tooltip'

First, you need to import a component to your code (сheck component path is right):

import Tooltip from "../../core/Tooltip";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = def

This prop set the shape of the component. Possible states: def . The default state is def.

view

string = filled

This prop set the view of the component. Possible states: filled . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

content

array

The data specifying the contents and appearance of the tree. Required.

position

string = auto

The position (relative to the target) at which the popover should appear. The default value of "auto" will choose the best position when opened and will allow the popover to reposition itself to remain onscreen as the user scrolls around.

isOpen

boolean

Whether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property.

disabled

boolean = false

Prevents the popover from appearing when true.