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

el-tooltip

Display contextual hints on hover using Element Plus tooltips.

21|2|Updated Mar 13, 2026
Search Tags:#vue#content#hover#element-plus#ui-component#tooltip
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-tooltip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-tooltip
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-tooltip
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-tooltip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tooltip component helps you display contextual hints and prompts when users hover over UI elements, reducing confusion and improving usability.

Core Features & Use Cases

  • 9 placements (top, bottom, left, right with alignment)
  • Supports HTML content and VNodes (Vue components)
  • Theming options (dark/light)
  • Controlled visibility, delays, and interaction behavior
  • Rich usage examples across basic, advanced, and virtual triggering use cases

Quick Start

Wrap the trigger element with an el-tooltip and provide the content via the content prop.

Frequently Asked Questions about el-tooltip

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

FAQPage Schema
How do I display contextual hints on hover using Element Plus in a Vue application?▼

To display hover hints in Vue, wrap your interactive element with a tooltip component and pass text to the content prop. Element Plus handles the hover trigger, popper placement, and safe visibility behavior automatically.

Can I render custom Vue components or HTML content inside an Element Plus tooltip?▼

Yes, you can render HTML content and VNodes, including Vue components, inside an Element Plus tooltip. This allows you to display rich contextual hints, formatted text, and interactive widgets beyond plain string text.

What placement options are available for positioning a tooltip around a trigger element?▼

Element Plus tooltips support 9 placement positions: top, bottom, left, and right, each with alignment variations. You can configure these popper options to ensure the hint appears precisely relative to the trigger.

How can I control tooltip visibility and add delays before showing or hiding the hint?▼

You can control tooltip visibility programmatically and configure show and hide delays. This controlled interaction behavior ensures hints appear predictably, preventing flickering when users briefly hover over UI elements.

Does Element Plus support theming and virtual triggering for tooltips?▼

Element Plus supports dark and light theming options for tooltips, alongside virtual triggering use cases. This allows you to attach hints to dynamically rendered elements and match your application's visual style.

Related Skills

Explore More Software Engineering Skills→
NAMEWTANAMEWTA
4

element-plus-vue3

Guide Element Plus Vue 3 component installation, theming, and API usage.

Community
Intermediate
LukasStricklerLukasStrickler
4

ui-animation

Design and implement accessible UI animations with reduced motion and focus management.

Community
Intermediate
jeffpeckyjeffpecky

build-mcp-app

Develop interactive UI widgets for MCP apps rendered inline in conversations.

Community
Advanced
jiaiyanjiaiyan
21

el-message

Display feedback notifications with success, info, warning, and error types.

Community
Basic