N Popover

Naive UI Popover Component

Pop some hidden message around content. Popover displays additional content in a floating layer triggered by user interaction.

When to Use

Use this component when:

• Rich tooltips: Display complex content in tooltips
• Dropdown menus: Create custom dropdown menus
• Info panels: Show additional information on hover/click
• Form popups: Display forms or inputs in floating layer
• Context menus: Create context-sensitive menus

When to Invoke

Invoke this skill when:

• User needs to implement popover components
• User wants to show floating content on hover/click
• User needs custom tooltips with rich content
• User asks about popover positioning
• User wants to create dropdown menus

Features

• Multiple Triggers: Support hover, click, focus, and manual triggers
• Flexible Placement: 12 placement options
• Customizable Styling: Full control over appearance
• Arrow Support: Optional arrow pointing to trigger
• Manual Positioning: Support for manual x/y positioning

API Reference

Popover Props

Popover Slots

Popover Methods

Basic Usage

Basic Popover

<template>
  <n-popover trigger="hover">
    <template #trigger>
      <n-button>Hover</n-button>
    </template>
    This is the popover content.
  </n-popover>
</template>

Click Trigger

<template>
  <n-popover trigger="click">
    <template #trigger>
      <n-button>Click</n-button>
    </template>
    This popover appears on click.
  </n-popover>
</template>

Common Patterns

Different Triggers

<template>
  <n-space>
    <n-popover trigger="hover">
      <template #trigger>
        <n-button>Hover</n-button>
      </template>
      Hover content
    </n-popover>
    
    <n-popover trigger="click">
      <template #trigger>
        <n-button>Click</n-button>
      </template>
      Click content
    </n-popover>
    
    <n-popover trigger="focus">
      <template #trigger>
        <n-button>Focus</n-button>
      </template>
      Focus content
    </n-popover>
  </n-space>
</template>

With Delay

<template>
  <n-popover trigger="hover" :delay="500" :duration="500">
    <template #trigger>
      <n-button>Delay 500ms</n-button>
    </template>
    This appears after 500ms delay.
  </n-popover>
</template>

No Arrow

<template>
  <n-popover trigger="hover" :show-arrow="false">
    <template #trigger>
      <n-button>Hover</n-button>
    </template>
    No arrow on this popover.
  </n-popover>
</template>

Different Placements

<template>
  <n-space>
    <n-popover placement="top" trigger="click">
      <template #trigger>
        <n-button>Top</n-button>
      </template>
      Top placement
    </n-popover>
    
    <n-popover placement="bottom" trigger="click">
      <template #trigger>
        <n-button>Bottom</n-button>
      </template>
      Bottom placement
    </n-popover>
    
    <n-popover placement="left" trigger="click">
      <template #trigger>
        <n-button>Left</n-button>
      </template>
      Left placement
    </n-popover>
    
    <n-popover placement="right" trigger="click">
      <template #trigger>
        <n-button>Right</n-button>
      </template>
      Right placement
    </n-popover>
  </n-space>
</template>

Custom Width

<template>
  <n-popover style="width: 500px" trigger="click">
    <template #trigger>
      <n-button>Width 500px</n-button>
    </template>
    <div>
      This popover has a custom width of 500px.
      It can contain more content.
    </div>
  </n-popover>
</template>

Trigger Width

<template>
  <n-popover width="trigger" trigger="click">
    <template #trigger>
      <n-button>I would like to leave this city</n-button>
    </template>
    This popover has the same width as the trigger button.
  </n-popover>
</template>

Manual Positioning

<template>
  <div
    style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, 0.5)"
    @click="handleClick"
  />
  <n-popover :show="showPopover" :x="x" :y="y" trigger="manual">
    Cool!
  </n-popover>
</template>

<script setup>
import { ref } from 'vue'

const showPopover = ref(false)
const x = ref(0)
const y = ref(0)

const handleClick = (e) => {
  showPopover.value = true
  x.value = e.clientX
  y.value = e.clientY
}
</script>

With Header and Footer

<template>
  <n-popover trigger="click">
    <template #trigger>
      <n-button>With Header/Footer</n-button>
    </template>
    <template #header>
      <div>Header Content</div>
    </template>
    Main content goes here.
    <template #footer>
      <div>Footer Content</div>
    </template>
  </n-popover>
</template>

Raw Style

<template>
  <n-popover trigger="hover" raw :show-arrow="false">
    <template #trigger>
      <n-button>Raw Style</n-button>
    </template>
    <div style="padding: 8px; background: white; border-radius: 4px;">
      Custom styled content without default styles.
    </div>
  </n-popover>
</template>

Scrollable Content

<template>
  <n-popover trigger="click" scrollable style="max-height: 200px">
    <template #trigger>
      <n-button>Scrollable</n-button>
    </template>
    <div v-for="i in 20" :key="i">
      Item {{ i }}
    </div>
  </n-popover>
</template>

Best Practices

1. Choose appropriate trigger: Use hover for info, click for interactive content

2. Set reasonable delay: Configure delay for better hover experience

3. Consider placement: Choose placement that doesn't obstruct important content

4. Use raw for custom styling: Use raw prop when you need complete control

5. Handle events: Use on-update:show to track popover visibility

6. Manage focus: Consider focus behavior for accessibility