skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-tooltip

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
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-tooltip
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-page-header

Render reusable page header UI with title, subtitle, and action slots for Naive UI pages.

Community
Intermediate
anonymousminatianonymousminati

frappe-impl-clientscripts

Implement Frappe client-side form behavior with event patterns and APIs.

Community
Advanced
jiaiyanjiaiyan
8

n-alert

Display contextual alert messages with lifecycle management for Naive UI in Vue 3.

Community
Intermediate
jiaiyanjiaiyan
21

el-tooltip

Display contextual hints on hover using Element Plus tooltips.

Community
Intermediate