Popover

function Example() {
  const { active, activate, deactivate } = useToggle(false);

return (

<Popover  active={active} onClose={deactivate} onOpen={activate}>
<Popover.Trigger>
{(attributes) => (
<Button rounded attributes={attributes}>
Show menu
</Button>
)}
</Popover.Trigger>
<Popover.Content>
  <Placeholder />
</Popover.Content>
</Popover>
);
}

You can use Popovers with any interactive element on the page by passing its attributes and adding the content you want to render.

<Popover>
  <Popover.Trigger>
    {(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
  </Popover.Trigger>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

Popovers open after clicking the trigger element, but you can customize that using triggerType property.

<Popover triggerType="hover">
  <Popover.Trigger>
    {(attributes) => (
      <Button attributes={attributes}>Trigger popover on hover</Button>
    )}
  </Popover.Trigger>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

You can define the position where you want to display the Popover. However, if it doesn't fit into the screen, it will automatically pick a better position that stays within the viewport.

<Popover position="bottom-end">
  <Popover.Trigger>
    {(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
  </Popover.Trigger>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

If you want to ignore the viewport boundaries and always show Popover using a specific position value, you can lock it with a forcePosition property. This can be useful when using Popover to build dropdown menus.

<Popover position="bottom-end" forcePosition>
  <Popover.Trigger>
    {(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
  </Popover.Trigger>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

You can control the width of the Popover with the width property. You can either pass a specific px or percent value. That includes using CSS variables for defining the size.

<Popover width="calc(var(--uic-unit-x1) * 100)">
  <Popover.Trigger>
    {(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
  </Popover.Trigger>
  <Popover.Content>Popover content</Popover.Content>
</Popover>

Popover comes with a default padding in its content area, and you can customize it with the padding property. For example, you can altogether remove it with padding set to 0.

<Popover padding={0}>
  <Popover.Trigger>
    {(attributes) => <Button attributes={attributes}>Trigger popover</Button>}
  </Popover.Trigger>
  <Popover.Content>
    <Placeholder h={200} />
  </Popover.Content>
</Popover>

If you need to add a close button to the Popover content, you can use it with the Dismissible utility.

function Demo() {
  const { activate, deactivate, active } = useToggle();

  return (
    <Popover active={active} onOpen={activate} onClose={deactivate}>
      <Popover.Trigger>
        {(attributes) => (
          <Button attributes={attributes}>Trigger popover</Button>
        )}
      </Popover.Trigger>
      <Popover.Content>
        <Dismissible onClose={deactivate}>
          <Placeholder h={200} />
        </Dismissible>
      </Popover.Content>
    </Popover>
  );
}