components

Popover

Popover displays floating content anchored to a trigger element. It supports click, hover, and focus triggers (individually or combined), 12 placement options, and configurable distance and skidding offsets. The component wraps its children (the trigger element) and renders the content prop in a floating layer. Use popoverRole to set the appropriate ARIA role: 'dialog' for interactive content, 'tooltip' for informational hints, or 'menu' for dropdown menus. For simple text hints, prefer the Tooltip component instead. Popover is better suited for rich content like forms, lists, or multi-element layouts.

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

Usage Guidance

When to use

  • +Display rich content (forms, lists, details) anchored to a trigger.
  • +Provide contextual actions or information without navigating away.
  • +Create custom dropdown-like interfaces.

When not to use

  • −For simple text hints — use Tooltip.
  • −For full-page blocking content — use Modal.
  • −For navigation menus — use Menu or DropdownMenu.

Examples

Code Samples

Click Popover

A popover that opens on click — the default trigger. Click the button to toggle.

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

export default function ClickPopover() {
  return (
    <Popover
      trigger="click"
      placement="bottom-start"
      content={
        <div className="p-4" style={{ width: 240 }}>
          <p className="text-sm font-medium mb-1">Job Details</p>
          <p className="text-xs text-gray-500">
            HVAC Installation at 123 Main St, scheduled for March 10.
          </p>
        </div>
      }
    >
      <Button buttonType="secondary">Show Details</Button>
    </Popover>
  );
}

Hover Popover

Opens on hover with a delay. Useful for preview cards and supplemental info.

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

export default function HoverPopover() {
  return (
    <Popover
      trigger="hover"
      placement="top"
      delayOnOpen={200}
      delayOnClose={100}
      content={
        <div className="p-3">
          <p className="text-xs text-gray-600">Hover content</p>
        </div>
      }
    >
      <Button buttonType="transparent">Hover me</Button>
    </Popover>
  );
}

Placement Variants

Popovers can be positioned on any side of the trigger element.

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

export default function PlacementDemo() {
  return (
    <div className="flex gap-3 flex-wrap">
      {["top", "bottom", "left", "right"].map(pos => (
        <Popover
          key={pos}
          placement={pos}
          content={<div className="p-2 text-xs">{pos}</div>}
        >
          <Button buttonType="secondary">{pos}</Button>
        </Popover>
      ))}
    </div>
  );
}

Guidelines

Do

  • ✓Use the placement prop to position relative to the trigger.
  • ✓Provide both open and close mechanisms.
  • ✓Keep popover content focused and concise.

Don't

  • ✗Don't nest popovers inside popovers.
  • ✗Don't use popovers for critical confirmations — use ConfirmationDialog.
  • ✗Don't put complex multi-step forms in popovers.

API Reference

PropTypeDefaultDescription
content*ReactNode—Content displayed inside the floating popover.
trigger"click" | "hover" | "focus" | combined"click"Event(s) that show/hide the popover. Combine with spaces: "click focus".
placement"top" | "bottom" | "left" | "right" | …-start | …-end"bottom"Position relative to the trigger. Supports 12 positions including start/end variants.
distancenumber8Pixel gap between the trigger and the popover.
skiddingnumber0Pixel offset along the edge closest to the trigger.
isOpenboolean—Directly control open/close state (controlled mode).
isFixedbooleanfalseUse fixed positioning so the popover stays visible even with overflow:hidden parents.
popoverRole"dialog" | "tooltip" | "menu""dialog"ARIA role for the popover container.
disabledbooleanfalseWhen true, the popover will not open.
delayOnOpennumber—Milliseconds to wait before opening.
delayOnClosenumber—Milliseconds to wait before closing.

Related Components

TooltipModalMenu