Props

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 Built with Ariakit

Github

import { Button } from 'welcome-ui/Button'
import { Tooltip } from 'welcome-ui/Tooltip'

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

export default Example

Examples

With title

Add a title to the tooltip component (optional)

Github

Fixed

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

Github

With a long text and a custom placement

Set a max-width for long text

Github

With a disabled button

We're adding a wrapper around the button when it's disabled otherwise the tooltip does not trigger.

Github

Placement

Using only with the fixed prop, placement will enable a translate animation on your tooltip. The direction works with these values for placement.

Github

Popover Text