components

Tooltip

Tooltips display informative text when users hover over or focus on an element. They wrap a child element and show a floating label on hover. Use tooltips to provide additional context or explain an action without cluttering the UI.

Import

import { Tooltip } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Provide supplementary text for icon-only buttons or truncated labels.
+Explain a control's purpose on hover without cluttering the UI.
+Show keyboard shortcuts or additional context on hover.

When not to use

−For rich content with links or buttons — use Popover.
−For critical information users must see — tooltips are hidden by default.
−For touch-only interfaces — tooltips require hover.

Examples

Code Samples

Basic Tooltip

A tooltip that appears on hover with default top positioning. Wrap any element with the Tooltip component.

import { Tooltip, Button } from "@skedulo/breeze-ui-react";

export default function BasicTooltip() {
  return (
    <Tooltip content="This is a tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Placement

Tooltips can be positioned on any side of the trigger element using the placement prop.

import { Tooltip, Button } from "@skedulo/breeze-ui-react";

export default function TooltipPlacement() {
  return (
    <div className="flex gap-4 items-center justify-center p-12">
      <Tooltip content="Tooltip on top" placement="top">
        <Button>Top</Button>
      </Tooltip>
      <Tooltip content="Tooltip on bottom" placement="bottom">
        <Button>Bottom</Button>
      </Tooltip>
      <Tooltip content="Tooltip on left" placement="left">
        <Button>Left</Button>
      </Tooltip>
      <Tooltip content="Tooltip on right" placement="right">
        <Button>Right</Button>
      </Tooltip>
    </div>
  );
}

Themes

Tooltips support dark (default) and light themes for different visual contexts.

import { Tooltip, Button } from "@skedulo/breeze-ui-react";

export default function TooltipThemes() {
  return (
    <div className="flex gap-4 items-center">
      <Tooltip content="Dark theme tooltip (default)">
        <Button>Default Theme</Button>
      </Tooltip>
      <Tooltip content="Light theme tooltip" theme="light">
        <Button>Light Theme</Button>
      </Tooltip>
    </div>
  );
}

On Different Elements

Tooltips can wrap any element, not just buttons. Use them on text, icons, or any interactive element.

import { Tooltip, Button } from "@skedulo/breeze-ui-react";

export default function TooltipElements() {
  return (
    <div className="flex gap-4 items-center">
      <Tooltip content="Click to perform action">
        <Button buttonType="primary">Action Button</Button>
      </Tooltip>
      <Tooltip content="More information about this text">
        <span className="text-sm text-blue-600 underline cursor-help">
          Hover for info
        </span>
      </Tooltip>
    </div>
  );
}

Disabled Tooltip

A tooltip with the disabled prop will not appear on hover.

import { Tooltip, Button } from "@skedulo/breeze-ui-react";

export default function DisabledTooltip() {
  return (
    <Tooltip content="You won't see this" disabled>
      <Button>Tooltip Disabled</Button>
    </Tooltip>
  );
}

Guidelines

Do

✓Keep tooltip text short (1-2 sentences max).
✓Use for icon-only buttons to describe their action.
✓Position tooltips to avoid covering the trigger element.

Don't

✗Don't put essential information only in tooltips.
✗Don't use tooltips on disabled elements without explanation.
✗Don't make tooltips too long — use Popover for complex content.

API Reference

Prop	Type	Default	Description
content*	string	—	The text content displayed inside the tooltip.
children*	ReactNode	—	The trigger element that the tooltip wraps. The tooltip appears when this element is hovered or focused.
placement	"top" \| "bottom" \| "left" \| "right"	"top"	The preferred position of the tooltip relative to the trigger element.
theme	"dark" \| "light"	"dark"	The visual theme of the tooltip. Dark is the default with a dark background and light text. Light uses a light background with dark text.
disabled	boolean	false	When true, the tooltip will not appear on hover or focus.

Related Components

Popover Button Modal