Porsche Design System

Popover

The p-popover component can be used to display some additional content on top of surrounding content, triggered by a button. By default it renders its own info button , or you can provide a custom trigger via the button slot.

By default, the Popover works uncontrolled: it manages its own visibility and toggles open or closed when its info button (or a slotted trigger) is clicked. It is dismissed on outside click, on Escape, or when keyboard focus leaves the Popover.

Alternatively, the Popover can be used in a controlled mode by setting the open prop together with a slotted button (the default info button does not toggle in this mode). In this mode you own the open state: the Popover only emits the dismiss event when the user requests to close it (via Escape, an outside click or when keyboard focus leaves the Popover), and you decide whether to update open in response.

Hint: The p-popover utilizes the Popover API and gets rendered on the #top-layer which enables it to be shown correctly even when used e.g. within a scroll container.

Some additional content.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-popover>
  <p-text>
    Some additional content.
  </p-text>
</p-popover>
<script>

</script>
</body>
</html>