Tooltip

1.1.0

A floating element that displays information related to another element when the element receives keyboard focus or when the mouse hovers over it.

Installation

pnpm add @inpulse-ds/tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ds/tooltip";
 
return (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>
        <Button icon size="md">
          <HandWaving />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Hello, World!</p>
        <TooltipArrow />
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
);

Examples

Default

By default, the Tooltip adopts the primary color as the background.

Monochromatic

Adopt a monochromatic style for the Tooltip by setting the mono property to true. This style will adapt to the system's light and dark mode. The property must be applied directly to TooltipContent.

Position

You can ask the Tooltip to appear from four different positions, using the position property that must be applied to the TooltipContent subcomponent. Possible values are: top, right, bottom and left.

Open by default

You can set the Tooltip to be displayed by default, without requiring user interaction. To do this, simply add the defaultOpen property in the Tooltip subcomponent.

Hello, World!

No delay

You can remove the Tooltip display delay by setting the delayDuration property to 0 in the TooltipContent subcomponent. This property can also be applied to TooltipProvider. When applied to TooltipProvider, all Tooltips within it will have the delay removed. If both have the property, the value of TooltipContent will prevail.

Events

Use the onChange event to perform an action every time the opening value of the Tooltip is changed.

Toast Form