WUI logo


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.

import * as React from 'react'
import { Tooltip } from '@welcome-ui/tooltip'
import { Button } from '@welcome-ui/button'
const Example = () => {
return (
<Tooltip content="Tooltip">
export default Example



Run the following command:

yarn add @welcome-ui/tooltip

Import component:

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


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.


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