Overview

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

Preview

Code

import { Tooltip } from '@inpulse-ui/tooltip';

export function Demo() {
  return <Tooltip />;
}

About

This component is our take on the Tooltip developed and maintained by Radix UI.

Keyboard Interactions

Key	Description
Tab	Opens/closes the tooltip without delay.
Space	If open, closes the tooltip without delay.
Enter	If open, closes the tooltip without delay.
Escape	If open, closes the tooltip without delay.

Installation

pnpm

pnpm add @inpulse-ui/tooltip

bun

bun add @inpulse-ui/tooltip

yarn

yarn add @inpulse-ui/tooltip

npm

npm install @inpulse-ui/tooltip

API Reference

Provider

Wraps your app to provide global functionality to your tooltips.

Prop	Type	Default Value	Required
delayDuration	number	700	No
skipDelayDuration	number	300	No
disableHoverableContent	boolean	-	No

Root

Contains all the parts of a tooltip.

Prop	Type	Default Value	Required
defaultOpen	boolean	-	No
open	boolean	-	No
onOpenChange	function	-	No
delayDuration	number	700	No
disableHoverableContent	boolean	-	No

Trigger

The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger.

Prop	Type	Default Value	Required
asChild	boolean	false	No

Data Attribute	Value
[data-state]	closeddelayed-openinstant-open

Portal

When used, portals the content part into the body.

Prop	Type	Default Value	Required
forceMount	boolean	-	No
container	HTMLElement	document.body	No

Content

The component that pops out when the tooltip is open.

Prop	Type	Default Value	Required
asChild	boolean	false	No
aria-label	string	-	No
onEscapeKeyDown	function	-	No
onPointerDownOutside	function	-	No
forceMount	boolean	-	No
side	enum	toprightbottomleft	No
sideOffset	number	0	No
align	enum	startcenterend	No
alignOffset	number	0	No
avoidCollisions	boolean	true	No
collisionBoundary	Element | Element[]	[]	No
collisionPadding	number | Partial<Record<Side, number>>	0	No
arrowPadding	number	0	No
sticky	enum	partialalways	No
hideWhenDetached	boolean	false	No

Data Attribute	Value
[data-state]	closeddelayed-openinstant-open
[data-side]	leftrightbottomtop
[data-align]	startendcenter

Arrow

An optional arrow element to render alongside the tooltip. This can be used to help visually link the trigger with the Tooltip.Content. Must be rendered inside Tooltip.Content.

Prop	Type	Default Value	Required
asChild	boolean	false	No
width	number	10	No
height	number	5	No

Usage

Wrap your tooltip components with TooltipProvider to provide the necessary context for the tooltip functionality. The Tooltip component contains the trigger and content, while TooltipTrigger is the element that activates the tooltip, and TooltipContent is the floating element that displays the information.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>
      Say something
    </TooltipTrigger>
    <TooltipContent>
      <p>Hello, World!</p>
      <TooltipArrow />
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Default

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

Preview

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

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.

Preview

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent mono>
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

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.

Preview

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent position="right">
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

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.

Preview

Hello, World!

Hello, World!

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip defaultOpen>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

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.

Preview

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip delayDuration={0}>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Events

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

Preview

Code

import {
  Tooltip,
  TooltipContent,
  TooltipArrow,
  TooltipProvider,
  TooltipTrigger,
} from "@inpulse-ui/tooltip";
import { Button } from "@inpulse-ui/button";
import { Hand } from "@inpulse-ui/button";

export function Demo() {
  return (
    <TooltipProvider>
      <Tooltip onChange={(open) => console.log(open)}>
        <TooltipTrigger asChild>
          <Button icon size="md" variant="outline">
            <Hand />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Hello, World!</p>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}