Tooltip
Allows user to show small information on hover an element.
version
5.13.2
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. Live examples: - [Combobox filtering](https://ariakit.org/examples/combobox-filtering) - [Form with Select](https://ariakit.org/examples/form-select) - [Hovercard with keyboard support](https://ariakit.org/examples/hovercard-disclosure) - [MenuItemRadio](https://ariakit.org/examples/menu-item-radio) - [Submenu](https://ariakit.org/examples/menu-nested) - [Toolbar with Select](https://ariakit.org/examples/toolbar-select) | 8 |
Packages #
Dependencies #
Peer dependencies #
Previous
PopoverNext
Breadcrumb