Note

This documentation describes the PopoverWithTarget Vue component for native UI views, for Xml templates see popover with target attribute.

PopoverWithTarget

A popover that shows or hides itself based on a bound target element reference. No click wiring is needed in the consumer — simply set the target to an HTMLElement to show the popover anchored to that element, or null to hide it.

Import

import { PopoverWithTarget } from '@neos/design-system'

v-model

Name	Type	Default	Description
target	HTMLElement \| null	null	The anchor element. Set to an HTMLElement to show the popover, null to hide it

Emits

Event	Payload	Description
update:target	HTMLElement \| null	Emitted when the popover closes (sets target to null)

Slots

Slot	Description
default	Popover content

Usage Examples

Popover anchored to a clicked element

<script setup>
  import { ref } from 'vue'
  const popoverTarget = ref(null)

  function openPopover(event) {
    popoverTarget.value = event.currentTarget
  }
</script>

<template>
  <button label="Options" @click="openPopover" />
  <PopoverWithTarget v-model:target="popoverTarget">
    <VerticalLayout space="small">
      <button label="Edit" variant="ghost" />
      <button label="Delete" variant="ghost-danger" />
    </VerticalLayout>
  </PopoverWithTarget>
</template>

Popover on row hover/click in a list

<div v-for="item in items" :key="item.id">
  <HorizontalLayout space="small">
    <Text>{{ item.name }}</Text>
    <button icon="more" size="small" variant="ghost" @click="e => activeTarget = e.currentTarget" />
  </HorizontalLayout>
</div>

<PopoverWithTarget v-model:target="activeTarget">
  <button label="View" />
  <button label="Remove" variant="danger" />
</PopoverWithTarget>