Popover

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

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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

Result

Loading...

Click Trigger

Live Editor

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

Result

Loading...

Placements

Live Editor

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>
  );
}

Result

Loading...

Rich Content

Live Editor

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>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
content	string	"Popover sample content"	Content displayed inside the popover body.
title	string	"Popover title"	Title displayed in the popover header.
arrow	boolean	true	Whether to show the popover's arrow pointing to the trigger.
color	string	"#fff"	The background color of the popover.

Import

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

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.