WUI logo

Tooltip

Allows user to show small information on hover an element.

version

5.0.0-alpha.32

install

yarn add @welcome-ui/tooltip

usage

import { Tooltip } from '@welcome-ui/tooltip'

Usage #

The tooltip follows the cursor.

Maybe you don't want the tooltip to follow the cursor…

With a long text and a custom placement #

Set a max-width for long text

With a disabled button #

We're adding a wrapper around the button when it's disabled otherwise the tooltip does not trigger.

With a fixed position #

Using the fixed prop in combination with placement will enable a translate animation on your tooltip. The direction works with these values for placement.

Properties #

NameType(s)DefaultRequired
content
string
Element
fixed
Boolean
placement
"top"
"right"
"bottom"
"left"
"auto-start"
"auto"
"auto-end"
"top-start"
"top-end"
"right-start"
"right-end"
"bottom-end"
"bottom-start"
"left-end"
"left-start"

Packages #

Dependencies #
Peer dependencies #