Version:

Install ​

shell
npm i @mate-react/popover

Import ​

tsx
import { MatePopover } from '@mate-react/popover';
import { MateButton } from '@mate-react/button';

Variants ​

Default ​

tsx
<>
  <MateButton id="popover-target">Open Popover</MateButton>
  <MatePopover for="popover-target" titleText="Popover Title" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
    <p>Popover content</p>
  </MatePopover>
</>
tsx
<MatePopover for="popover-target" titleText="Popover with Footer" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Popover content</p>
  <MateButton slot="footer">Aktion</MateButton>
  <MateButton slot="footer" theme="primary">Bestätigen</MateButton>
</MatePopover>

With Arrow ​

tsx
<MatePopover for="popover-target" theme="arrow" position="bottom" opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <p>Popover with arrow</p>
</MatePopover>