Popover

A floating panel with content in it, as opposed to a menu of rows. Kobalte's Popover renders its content as role="dialog" and positions it with a popper; these classes only paint.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`popover-content`	The panel: raised surface, border, shadow
`popover-title`	Its heading
`popover-description`	Muted body text

Basic

<div class="popover-content">
  <h2 class="popover-title">Share this page</h2>
  <p class="popover-description">Anyone with the link can read it.</p>
</div>

<div class="popover-content">
  <h2 class="popover-title">Share this page</h2>
  <p class="popover-description">Anyone with the link can read it.</p>
</div>

import { Popover } from "@kobalte/core/popover";

<Popover>
  <Popover.Trigger class="btn">Share</Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <Popover.Title class="popover-title">Share this page</Popover.Title>
      <Popover.Description class="popover-description">
        Anyone with the link can read it.
      </Popover.Description>
      <Popover.CloseButton class="btn btn-ghost">Close</Popover.CloseButton>
    </Popover.Content>
  </Popover.Portal>
</Popover>

<div role="dialog" data-expanded>
  <h2 class="popover-title">Share this page</h2>
  <p class="popover-description">Anyone with the link can read it.</p>
</div>

Dialog.Content is also role="dialog", and Kobalte marks them the same way, so a Kobalte dialog picks up this panel too. Add .dialog-box to it if you want the modal sizing as well.