Component specification

Displays floating content anchored to a trigger element. Popovers are used for dropdown menus, form overlays, and contextual actions that require more space than a tooltip.

• Component Name: N8nPopover
• Figma Component: Figma
• Reka UI Component: Popover

Public API Definition

Props

• open?: boolean - Controlled visibility state. Supports two-way binding via v-model:open.
• side?: 'top' | 'right' | 'bottom' | 'left' - Which side of the trigger to position the popover. Default: undefined (auto)
• align?: 'start' | 'center' | 'end' - Alignment along the side axis. Default: undefined (auto)
• sideOffset?: number - Offset from the trigger element in pixels. Default: 5
• sideFlip?: boolean - Whether to flip to opposite side if insufficient space.
• width?: string - Popover width (e.g., '304px', 'auto').
• maxHeight?: string - Maximum height for scrollable content.
• contentClass?: string - Custom CSS class name for the popover content element.
• teleported?: boolean - Whether to append the popover to the body element. Default: true
• showArrow?: boolean - Whether to show the arrow pointing to the trigger. Default: false
• enableScrolling?: boolean - Whether to enable built-in scroll area. Default: true
• enableSlideIn?: boolean - Whether to enable slide-in animation. Default: true
• scrollType?: 'auto' | 'always' | 'scroll' | 'hover' - Scrollbar visibility behavior. Default: 'hover'
• suppressAutoFocus?: boolean - Whether to suppress auto-focus when opened. Default: false
• zIndex?: number - z-index of popover content. Default: 999
• reference?: Element - Custom reference element for positioning.

Events

• update:open - Emitted when visibility changes. Payload: boolean. Used with v-model:open.
• before-enter - Emitted before the popover enter animation starts.
• after-leave - Emitted after the popover leave animation completes.

Slots

• trigger - The trigger element that activates the popover (required).
• content - The popover content. Receives { close: () => void } scope for programmatic closing.

Template usage example

Basic click popover:

<script setup lang="ts">

</script>

<template>
  
    <template #trigger>
      
    </template>
    <template #content>
      <div class="menu-content">
        <p>Popover content here</p>
      </div>
    </template>
  
</template>

Controlled visibility with v-model:

<script setup lang="ts">

const isOpen = ref(false)
</script>

<template>
  
    <template #trigger>
      
    </template>
    <template #content>
      <div class="popover-content">
        <p>Controlled popover content</p>
        
      </div>
    </template>
  
</template>

With custom styling:

<script setup lang="ts">

</script>

<template>
  
    <template #trigger>
      
    </template>
    <template #content>
      <div class="color-picker">
        
      </div>
    </template>
  
</template>

With arrow and alignment:

<script setup lang="ts">

</script>

<template>
  
    <template #trigger>
      <span class="submenu-trigger">Options</span>
    </template>
    <template #content>
      <ul class="submenu-options">
        <li>Option 1</li>
        <li>Option 2</li>
      </ul>
    </template>
  
</template>

Non-teleported (stays in DOM hierarchy):

<script setup lang="ts">

</script>

<template>
  <div class="dropdown-container">
    
      <template #trigger>
        <input type="text" placeholder="Search..." />
      </template>
      <template #content>
        <div class="search-results">
          
        </div>
      </template>
    
  </div>
</template>

Using close function from slot scope:

<script setup lang="ts">

const handleAction = () => {
  // Do something
}
</script>

<template>
  
    <template #trigger>
      
    </template>
    <template #content="{ close }">
      <div class="action-menu">
        <button @click="handleAction(); close()">
          Perform action and close
        </button>
      </div>
    </template>
  
</template>

With scrollable content:

<script setup lang="ts">

</script>

<template>
  
    <template #trigger>
      <span>Show list</span>
    </template>
    <template #content>
      <ul class="long-list">
        
      </ul>
    </template>
  
</template>

With animation lifecycle events:

<script setup lang="ts">

const onBeforeEnter = () => {
  console.log('Popover is about to appear')
}

const onAfterLeave = () => {
  console.log('Popover has fully closed')
}
</script>

<template>
  
    <template #trigger>
      <span>Click me</span>
    </template>
    <template #content>
      <div>Animated popover</div>
    </template>
  
</template>

Without auto-focus (useful for inputs):

<script setup lang="ts">

</script>

<template>
  
    <template #trigger>
      <input type="text" placeholder="Type here..." />
    </template>
    <template #content>
      <div class="suggestions">
        
      </div>
    </template>
  
</template>