import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Popover

A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.

Live Example

<StoryWithControls component="Popover" props={{ content: "Popover sample content", title: "Popover title", arrow: true, color: "#fff" }} controls={[ { name: "content", label: "Content", type: "text", description: "Content displayed inside the popover body." }, { name: "title", label: "Title", type: "text", description: "Title displayed in the popover header." }, { name: "arrow", label: "Arrow", type: "boolean", description: "Whether to show the popover's arrow pointing to the trigger." }, { name: "color", label: "Color", type: "color", description: "The background color of the popover." }, { name: "placement", label: "Placement", type: "select", options: [ "topLeft", "top", "topRight", "leftTop", "left", "leftBottom", "rightTop", "right", "rightBottom", "bottomLeft", "bottom", "bottomRight" ], description: "Position of the popover relative to the trigger element." }, { name: "trigger", label: "Trigger", type: "select", options: [ "hover", "click", "focus" ], description: "Event that triggers the popover to appear." } ]} sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]} />

Try It

Edit the code below to experiment with the component:

function Demo() {
  return (
    <Popover
      content="Popover sample content"
      title="Popover title"
      arrow
    >
      <Button>Hover me</Button>
    </Popover>
  );
}

Click Trigger

function ClickPopover() {
  return (
    <Popover
      content="This popover appears on click."
      title="Click Popover"
      trigger="click"
    >
      <Button>Click me</Button>
    </Popover>
  );
}

Placements

function PlacementsDemo() {
  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
      {['top', 'right', 'bottom', 'left'].map(placement => (
        <Popover
          key={placement}
          content={`This popover is placed on the ${placement}`}
          title={placement}
          placement={placement}
        >
          <Button>{placement}</Button>
        </Popover>
      ))}
    </div>
  );
}

Rich Content

function RichPopover() {
  return (
    <Popover
      title="Dashboard Info"
      content={
        <div>
          <p><strong>Created by:</strong> Admin</p>
          <p><strong>Last modified:</strong> Jan 2025</p>
          <p><strong>Charts:</strong> 12</p>
        </div>
      }
    >
      <Button buttonStyle="primary">
        <Icons.InfoCircleOutlined /> View Details
      </Button>
    </Popover>
  );
}

Props

Import

import { Popover } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::