Table of Contents
Note

This documentation describes the IdentifiedPopover Vue component for native UI views, for Xml templates see popover with overlay-id attribute.

IdentifiedPopover

A popover whose visibility is controlled by overlay:toggle events from the current ViewModel's event manager. The triggering mouse event is used as the popover anchor position.

Import

import { IdentifiedPopover } from '@neos/app'

Props

Prop Type Default Description
overlayId string — Required. ID used to match overlay:toggle events from the ViewModel

Slots

Slot Description
default Popover content

Usage

The popover opens and closes automatically when the ViewModel dispatches an overlay:toggle event with the matching overlayId. The MouseEvent from the trigger is used to position the popover near the click target.

Usage Examples

Declaring the popover

<IdentifiedPopover overlay-id="row-actions">
  <VerticalLayout space="extrasmall">
    <button label="View Details" variant="ghost" @click="viewDetails" />
    <button label="Edit" variant="ghost" @click="edit" />
    <button label="Delete" variant="ghost-danger" @click="deleteItem" />
  </VerticalLayout>
</IdentifiedPopover>

Opening from a button

<ToggleOverlayButton overlay-id="row-actions">
  <button icon="more" size="small" variant="ghost" />
</ToggleOverlayButton>

Opening from a ViewModel action (e.g. on row click)

viewModel.toggleOverlay('row-actions', { state: 'show', event: mouseEvent })