n-tooltip

Name: n-tooltip
Availability: InStock
Author: jiaiyan

Creates reusable tooltip components with Vue API compatible with Naive UI for contextual hints on UI elements.

8|3|Updated Mar 13, 2026

Search Tags:#documentation #vue #trigger #ui-components #placement #naive-ui #tooltip

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tooltips provide contextual hints for UI elements, but inconsistent usage across an app can create confusing UX and increased maintenance overhead.

Core Features & Use Cases

Multiple triggers: hover, click, focus, or manual activation.
Placement options: supports a wide range of positions including top, bottom, left, right, and their variants.
Arrow visibility and customization: show or hide the tooltip arrow and apply custom styling.
Rich content and events: supports rich content, slots for trigger, and show/hide events.
Use case examples: show help text for form fields, explain icon buttons, or provide quick descriptions in data tables.

Quick Start

Attach the tooltip to a trigger element and configure the trigger, placement, and content to display contextual hints.

Frequently Asked Questions about n-tooltip

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

FAQPage Schema

How do I add a tooltip to a Vue component for hover and click triggers?▼

To add a Vue tooltip, attach the tooltip component to a trigger element and configure hover, click, focus, or manual activation settings to display contextual hints.

What placement options are available when displaying tooltips in a Vue data table?▼

Tooltip placement options include top, bottom, left, right, and their variants, allowing you to position contextual hints accurately across 12 placement positions within Vue data tables.

Can I use Naive UI components with this Vue tooltip component?▼

Yes, the Vue tooltip component features a stable API that is fully compatible with Naive UI components, ensuring seamless integration for displaying help text or field explanations.

How do I show rich content inside a tooltip for form field explanations?▼

To show rich content inside a tooltip for form fields, utilize the built-in slots to pass custom elements and apply custom styling to the tooltip arrow and body.

What is the best way to handle tooltip show and hide events in a Vue dashboard?▼

Handle tooltip show and hide events in a Vue dashboard by configuring the built-in event listeners on the tooltip component to trigger manual activation or custom UI logic.

Are there limitations when using manual triggers for tooltips in Vue applications?▼

Manual tooltip triggers require explicit event handling to toggle visibility, but the component fully supports this mode alongside hover, click, and focus without inherent API limitations.