Welcome UI 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.

SourceBuilt with Ariakit
OverviewProps
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

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.

PopoverText