n-popover

Name: n-popover
Availability: InStock
Author: jiaiyan

Display floating content anchored to triggers in Naive UI popovers.

8|3|Updated Mar 13, 2026

Search Tags:#vue #dropdown #popover #ui-component #naive-ui #tooltip #floating-content

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-popover

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-popover
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-popover
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-popover

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The popover component enables floating content anchored to triggers, for tooltips, dropdown menus, and informational panels in Naive UI.

Core Features & Use Cases

Multiple Triggers: Support hover, click, focus, and manual triggers
Flexible Placement: Provides various placement options to fit layout
Arrow Support: Optional arrow pointing to the trigger
Header/Footer Slots: Customizable header and footer content for popovers
Manual Positioning: Support for manual x/y positioning and absolute placement

Quick Start

Wrap a trigger element with n-popover to display floating content on user interaction.

Frequently Asked Questions about n-popover

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I display a tooltip or dropdown anchored to a trigger element in Vue?▼

To display a tooltip or dropdown in Vue, wrap your trigger element with a popover component to show floating content anchored to it upon user interaction. It supports hover, click, focus, and manual triggers.

Can I manually position floating content with specific x and y coordinates?▼

Yes, you can manually position floating content using specific x and y coordinates. The popover component supports manual positioning and absolute placement to precisely control where the floating panel appears on the screen.

Does Naive UI popover support custom header and footer slots for informational panels?▼

Yes, Naive UI popover supports custom header and footer slots for informational panels. You can insert customizable header and footer content into your popovers to provide structured contextual information.

What is the best way to show an arrow pointing to the trigger in a floating panel?▼

The best way to show an arrow pointing to the trigger in a floating panel is to enable the optional arrow support feature. This renders a visual indicator pointing directly from the popover content back to the trigger element.

What placement options are available for floating dropdown menus in Naive UI?▼

Various flexible placement options are available for floating dropdown menus in Naive UI. The popover component provides multiple positioning choices to ensure the floating content fits correctly within your application layout.