Popover

Displays rich content in a portal, triggered by a button.

Examples

Default

<script setup>
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  Button
} from '@empathyds/vue'
</script>

<Popover>
  <PopoverTrigger as-child>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="grid gap-4">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">
          Set the dimensions for the layer.
        </p>
      </div>
    </div>
  </PopoverContent>
</Popover>

Props

Popover

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the popover when it is initially rendered.
open	boolean	-	The controlled open state of the popover.
modal	boolean	false	The modality of the popover.

Events

Popover

Event	Payload	Description
update:open	boolean	Event handler called when the open state of the popover changes.

Slots

Popover

Slot	Description
default	The content of the popover.

PopoverTrigger

Slot	Description
default	The content of the trigger.

PopoverContent

Slot	Description
default	The items of the popover.