WUI logo

Tooltip

The Tooltip component is a small, interactive UI element that provides contextual information or descriptions when users hover over an element or focus on it. It enhances user experience by offering additional guidance or clarifications without cluttering the main interface. Tooltips are commonly used for icons, buttons, links, and other interactive elements to improve accessibility and usability.

Source@welcome-ui/tooltipBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { Tooltip } from '@welcome-ui/tooltip'
import { Button } from '@welcome-ui/button'


const Example = () => {
  return (
    <Tooltip content="Tooltip">
      <Button>Tooltip</Button>
    </Tooltip>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/tooltip
2

Import component:

import { Tooltip } from '@welcome-ui/tooltip'

Examples

Fixed

Maybe you don't want the tooltip to follow the cursor set by fixed property

With an arrow

You can use the withArrow property to display an arrow pointing towards your trigger

It will only display with the fixed property set to true

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.

PopoverIcon