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
<Tooltipplacement="bottom-start"content={<div>lorem ipsum dolor sit amet, consectetur adipiscing elit</div>}><span>With long text</span></Tooltip>
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
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 #
Previous
PopoverNext
Breadcrumb