Tooltip

A small popup that describes the element it is attached to, shown on hover or focus.

Basic

Show code

import { Button } from "@makeplane/propel/components/button";
import { Tooltip } from "@makeplane/propel/components/tooltip";

export default function BasicDemo() {
  return (
    <Tooltip label="Create a new project">
      <Button
        label="New project"
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
      />
    </Tooltip>
  );
}

Placement

The side prop chooses which edge the popup attaches to. It may flip automatically to stay in view.

Show code

import { Button } from "@makeplane/propel/components/button";
import { Tooltip } from "@makeplane/propel/components/tooltip";

export default function PlacementDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip label="Shown above the trigger" side="top">
        <Button label="Top" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
      </Tooltip>
      <Tooltip label="Shown to the right" side="right">
        <Button label="Right" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
      </Tooltip>
      <Tooltip label="Shown below the trigger" side="bottom">
        <Button label="Bottom" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
      </Tooltip>
      <Tooltip label="Shown to the left" side="left">
        <Button label="Left" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
      </Tooltip>
    </div>
  );
}

With shortcut

Show code

import { Button } from "@makeplane/propel/components/button";
import { Tooltip } from "@makeplane/propel/components/tooltip";

export default function WithShortcutDemo() {
  return (
    <Tooltip label="Open command menu" shortcut="⌘ K">
      <Button
        label="Command menu"
        prominence="secondary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
        aria-keyshortcuts="Meta+K"
      />
    </Tooltip>
  );
}

Grouped

Wrapping triggers in a TooltipProvider shares open/close timing, so moving between adjacent triggers shows the next tooltip immediately instead of restarting the hover delay.

Show code

import { Button } from "@makeplane/propel/components/button";
import { Tooltip, TooltipProvider } from "@makeplane/propel/components/tooltip";

export default function GroupedDemo() {
  return (
    <TooltipProvider closeDelay={100}>
      <div className="flex flex-wrap items-center gap-3">
        <Tooltip label="Bold the selection">
          <Button label="Bold" prominence="secondary" tone="neutral" magnitude="md" sizing="hug" />
        </Tooltip>
        <Tooltip label="Italicize the selection">
          <Button
            label="Italic"
            prominence="secondary"
            tone="neutral"
            magnitude="md"
            sizing="hug"
          />
        </Tooltip>
        <Tooltip label="Underline the selection">
          <Button
            label="Underline"
            prominence="secondary"
            tone="neutral"
            magnitude="md"
            sizing="hug"
          />
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

Controlled

Show code

import { Button } from "@makeplane/propel/components/button";
import { Tooltip } from "@makeplane/propel/components/tooltip";
import * as React from "react";

export default function ControlledDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip label="Copies the invite link" open={open} onOpenChange={setOpen}>
        <Button
          label="Copy link"
          prominence="secondary"
          tone="neutral"
          magnitude="md"
          sizing="hug"
        />
      </Tooltip>
      <Button
        label="Show hint"
        prominence="primary"
        tone="neutral"
        magnitude="md"
        sizing="hug"
        onClick={() => setOpen(true)}
      />
    </div>
  );
}

Installation

import { Tooltip } from "@makeplane/propel/components/tooltip";

Props

Tooltip

Prop	Type	Required	Description
label	string	Yes	The text shown inside the tooltip popup.
shortcut	string	No	Optional keyboard-shortcut hint shown to the right of `label`, dimmed (e.g. `"⌘ K"`). Maps to the Figma "Cmd + K" slot — omit it for a plain tooltip. This is visual text; put the canonical `aria-keyshortcuts` value on the trigger element.
children	ReactElement<unknown, string \| JSXElementConstructor<any>>	Yes	The element the tooltip is attached to. Base UI renders the trigger as a `<button>` by default; pass a single element and it is used as the trigger via the `render` prop, so any focusable element (a real button, an icon button) can anchor the tooltip.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"	No	Which side of the trigger to place the popup on. May flip automatically to stay in view.
sideOffset	number	No	Gap in pixels between the trigger and the popup. Leaves room for the arrow.
delay	number	No	How long to wait (ms) before opening on hover. Focus opens immediately.