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 #
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