WUI logo

Tooltip

Allows user to show small information on hover an element.

version

4.2.0

install

yarn add @welcome-ui/tooltip

usage

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

Usage #

The tooltip follows the cursor.

<Tooltip content="πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯">
<Button>Show a beautiful tooltip πŸ”₯</Button>
</Tooltip>

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

<Tooltip fixed content="πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯">
<Button>Show a beautiful fixed tooltip πŸ”₯</Button>
</Tooltip>

With a long text and a custom placement #

Set a max-width for long text

<Tooltip
placement="bottom-start"
content={<div>lorem ipsum dolor sit amet, consectetur adipiscing elit</div>}
>
<span>With long text</span>
</Tooltip>

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 #