el-tooltip

Name: el-tooltip
Availability: InStock
Author: jiaiyan

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

Ready to run

npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-tooltip

💬 Prompt for ChatGPT / Claude Chat▼

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.