Tooltip
Allows user to show small information on hover an element.
version
5.5.0
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 set by fixed
property
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.
Placement #
Using only with the fixed
prop, placement
will enable a translate animation on your tooltip. The direction works with these values for placement
.
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
gutter | number The distance between the popover and the anchor element. | 8 |
Packages #
Dependencies #
Peer dependencies #
Previous
PopoverNext
Breadcrumb