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