Popover 10.17.4

ARIA

RTL

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

Anatomy

<Popover>
  <Popover.Trigger>...</Popover.Trigger>
  <Popover.Panel>...</Popover.Panel>
</Popover>

Default

"use client";

import { Popover, Button, MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Default = () => {
  return (
    <Popover data-testid="popover">
      <div className="flex">
        <Popover.Trigger data-testid="popover-trigger">
          <Button>Toggle Popover</Button>
        </Popover.Trigger>
      </div>
      <Popover.Panel
        className="p-2 flex flex-col gap-1"
        data-testid="popover-panel"
      >
        <Content />
      </Popover.Panel>
    </Popover>
  );
};

const Content: React.FC = () => (
  <>
    <MenuItem data-testid="first-item">
      <span className="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Tournaments"
        text={<span>Best tournaments with streamers</span>}
      />
    </MenuItem>
    <MenuItem data-testid="second-item">
      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Promotions"
        text={<span> Your favorite games</span>}
      />
    </MenuItem>
    <MenuItem data-testid="third-item">
      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Providers"
        text={<span> Your favorite games</span>}
      />
    </MenuItem>
  </>
);

export default Default;

Position

The complete list of all possible positions is in the props table below.

"use client";

import { Popover, Button } from "@heathmont/moon-core-tw";

const Position = () => {
  return (
    <div className="flex align-middle justify-around items-center w-full gap-2">
      <Popover position="top">
        <Popover.Trigger data-testid="popover-trigger">
          <Button>Top</Button>
        </Popover.Trigger>
        <Popover.Panel>
          <Content />
        </Popover.Panel>
      </Popover>

      <Popover position="right">
        <Popover.Trigger data-testid="popover-right-trigger">
          <Button>Right</Button>
        </Popover.Trigger>
        <Popover.Panel>
          <Content />
        </Popover.Panel>
      </Popover>

      <Popover position="left">
        <Popover.Trigger data-testid="popover-left-trigger">
          <Button>Left</Button>
        </Popover.Trigger>
        <Popover.Panel>
          <Content />
        </Popover.Panel>
      </Popover>
    </div>
  );
};

const Content: React.FC = () => (
  <p className="p-4 text-moon-14">
    {/* cSpell:disable */}
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
    {/* cSpell:enable */}
  </p>
);
export default Position;

Trigger elements

Open popover

"use client";

import { Popover, Button, Chip, MenuItem } from "@heathmont/moon-core-tw";
import { ControlsChevronDown } from "@heathmont/moon-icons-tw";

const TriggerElements = () => {
  return (
    <div className="flex align-middle justify-around items-center w-full gap-2">
      <Popover>
        <Popover.Trigger data-testid="popover-trigger">
          <Button>Button</Button>
        </Popover.Trigger>
        <Popover.Panel className="p-2 flex flex-col gap-1">
          <Content />
        </Popover.Panel>
      </Popover>

      <Popover position="bottom-end">
        <Popover.Trigger data-testid="popover-trigger-arrow">
          <Chip
            iconOnly={<ControlsChevronDown className="text-moon-24" />}
            aria-label="Trigger"
            data-testid="popover-trigger-arrow-inner"
          />
        </Popover.Trigger>
        <Popover.Panel className="p-2 flex flex-col gap-1">
          <Content />
        </Popover.Panel>
      </Popover>

      <Popover position="bottom-start">
        <Popover.Trigger data-testid="popover-trigger-text">
          <span
            className="text-moon-14 text-trunks cursor-pointer hover:text-piccolo"
            data-testid="popover-trigger-text-inner"
          >
            Open popover
          </span>
        </Popover.Trigger>
        <Popover.Panel className="p-2 flex flex-col gap-1">
          <Content />
        </Popover.Panel>
      </Popover>
    </div>
  );
};

const Content: React.FC = () => (
  <div data-testid="popover-content">
    <MenuItem>Tournaments</MenuItem>
    <MenuItem>Promotions</MenuItem>
    <MenuItem>Providers</MenuItem>
  </div>
);
export default TriggerElements;

With close button

"use client";

import { useEffect } from "react";
import { Popover, Button, MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

type RenderProps = {
  open?: boolean;
  close?: () => void;
};
const WithCloseButton = () => {
  return (
    <Popover>
      <Popover.Trigger data-testid="popover-trigger">
        <Button>Toggle Popover</Button>
      </Popover.Trigger>
      <Popover.Panel className="p-2 flex flex-col gap-1">
        {({ open, close }) => <Content close={close} open={open} />}
      </Popover.Panel>
    </Popover>
  );
};

const Content: React.FC<RenderProps> = ({ open, close }) => {
  useEffect(() => {
    if (open) {
      console.log("Open Popover");
    }
    return () => {
      console.log("Close Popover");
    };
  }, [open]);

  return (
    <>
      <MenuItem>
        <span className="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
          <OtherFrame className="text-bulma text-moon-24" />
        </span>
        <MenuItem.MultiTitle
          title="Tournaments"
          text={<span>Best tournaments with streamers</span>}
        />
      </MenuItem>
      <MenuItem>
        <span className="flex w-11 h-11 bg-gohan items-center justify-center">
          <OtherFrame className="text-bulma text-moon-24" />
        </span>
        <MenuItem.MultiTitle
          title="Promotions"
          text={<span> Your favorite games</span>}
        />
      </MenuItem>
      <MenuItem>
        <span className="flex w-11 h-11 bg-gohan items-center justify-center">
          <OtherFrame className="text-bulma text-moon-24" />
        </span>
        <MenuItem.MultiTitle
          title="Providers"
          text={<span> Your favorite games</span>}
        />
      </MenuItem>
      <Button onClick={close} data-testid="popover-close-btn">
        Close
      </Button>
    </>
  );
};

export default WithCloseButton;

Tooltip view example

"use client";

import { Popover, Chip } from "@heathmont/moon-core-tw";

const TooltipViewExample = () => {
  return (
    <Popover position="top">
      <Popover.Trigger data-testid="popover-trigger">
        <Chip>Trigger</Chip>
      </Popover.Trigger>
      <Popover.Panel className="w-auto min-w-[12rem] overflow-y-visible p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-goku">
        This is the popover with arrow (tooltip)
        <Popover.Arrow />
      </Popover.Panel>
    </Popover>
  );
};

export default TooltipViewExample;

Tooltip view example with always open state

"use client";

import { Popover, Chip } from "@heathmont/moon-core-tw";

const TooltipViewAlwaysOpen = () => {
  return (
    <Popover position="top">
      <Popover.Trigger data-testid="popover-trigger">
        <Chip>Trigger</Chip>
      </Popover.Trigger>
      <Popover.Panel
        isStatic
        className="w-auto min-w-[12rem] overflow-y-visible p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-goku"
      >
        This is the popover with arrow (tooltip)
        <Popover.Arrow />
      </Popover.Panel>
    </Popover>
  );
};

export default TooltipViewAlwaysOpen;

Disable flip on component

"use client";

import { Popover, Button, MenuItem } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const DisableFlipOnComponent = () => {
  return (
    <Popover autoPositionDisable={true}>
      <Popover.Trigger data-testid="popover-trigger">
        <Button>Toggle Popover</Button>
      </Popover.Trigger>
      <Popover.Panel className="p-2 flex flex-col gap-1">
        <Content />
      </Popover.Panel>
    </Popover>
  );
};

const Content: React.FC = () => (
  <>
    <MenuItem>
      <span className="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Tournaments"
        text={<span>Best tournaments with streamers</span>}
      />
    </MenuItem>
    <MenuItem>
      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Promotions"
        text={<span> Your favorite games</span>}
      />
    </MenuItem>
    <MenuItem>
      <span className="flex w-11 h-11 bg-gohan items-center justify-center">
        <OtherFrame className="text-bulma text-moon-24" />
      </span>
      <MenuItem.MultiTitle
        title="Providers"
        text={<span> Your favorite games</span>}
      />
    </MenuItem>
  </>
);

export default DisableFlipOnComponent;

These are props specific to the Popover component:

Name	Type	Default
position	enum	bottom
autoPositionDisable	boolean	-
open	boolean	-

Popover.Panel

These are props specific to the Popover.Panel component:

Name	Type	Default
className	string	-
isStatic	boolean	-
open	boolean	-
close	"() => void"	-