Tooltip

Informative text shown when users hover, focus, or tap an element.

Tooltips display informative text when users hover over, focus on, or tap an element. The component is compound: a Tooltip wraps a TooltipTrigger (the anchor) and a TooltipContent (the popup), which supports a default and a blue color variant.

Usage

import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@workflowbuilder/ui';

function Example() {
  return (
    <Tooltip placement="top">
      <TooltipTrigger asChild>
        <Button variant="secondary">Hover for tooltip</Button>
      </TooltipTrigger>
      <TooltipContent tooltipType="default">Default tooltip</TooltipContent>
    </Tooltip>
  );
}

Props

childrenrequired

TypeReactNode

Tooltip reference element.

initialOpen

Typeboolean

If true, the component is shown at initial

onOpenChange

Type(open: boolean) => void

Callback fired when the component requests to be open.

open

Typeboolean

If true, the component is shown.

placement

TypeTooltipPlacement

Default'bottom'

Tooltip placement.

CSS variables

Color

--wb-public-tooltip-default-background

--wb-public-tooltip-blue-background

--wb-public-tooltip-text-color

--wb-public-tooltip-blue-text-color

Size

--wb-public-tooltip-padding

--wb-public-tooltip-radius-size