skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

tooltip-usage

Document Tooltip wrapper patterns and props for UI-kit components.

2|Updated Dec 2, 2024
Search Tags:#documentation#frontend#react#patterns#ui-kit#tooltip
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill tooltip-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tooltip-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/tooltip-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill tooltip-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tooltip usage provides a standardized way to present non-intrusive help for UI elements, reducing inline text clutter and guiding users without obstructing core content.

Core Features & Use Cases

  • Wrapper pattern: wrap UI controls with Tooltip to show supplemental information on hover or focus.
  • Prop mapping: demonstrates common Tooltip props such as content, placement, openDelay, closeDelay, interactive, defaultOpen, and closeOnEscape/closeOnClick.
  • Best practices: avoid using Tooltips for required information; prefer visible help text for critical guidance; use Zag positioning to map to underlying tooltip logic.

Quick Start

Wrap a Button with Tooltip to provide supplemental hover/focus help.

Frequently Asked Questions about tooltip-usage

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

FAQPage Schema
How do I implement tooltip usage in React UI-kit components without cluttering primary content?▼

Implement tooltip usage in React by wrapping UI controls to show supplemental information on hover or focus. This approach reduces inline text clutter and guides users without obstructing core content.

What are the best practices for tooltip props like placement, openDelay, and closeDelay in frontend development?▼

Tooltip best practices involve mapping props like content, placement, openDelay, closeDelay, and interactive to control display behavior. Use these to manage supplementary hover and focus help effectively.

When should I avoid using tooltips for supplementary UI help?▼

Avoid using tooltips for required information or critical guidance. Prefer visible help text for essential instructions, reserving tooltips for non-intrusive, supplemental information to maintain UI clarity.

How does Zag positioning map to underlying tooltip logic in a UI-kit?▼

Zag positioning maps to underlying tooltip logic to handle placement mechanics within the UI-kit. This ensures accurate positioning of supplemental help content during hover and focus interactions.

What common mistakes should I avoid when adding tooltips to frontend documentation patterns?▼

Common tooltip mistakes include hiding critical guidance, missing documented usage patterns, and neglecting props like closeOnEscape or closeOnClick. Proper documentation structure prevents these frontend implementation errors.

Related Skills

Explore More Software Engineering Skills→
javierhbrjavierhbr

shadcn-ui

Implement React UI components with shadcn/ui, CVA, and Tailwind CSS.

Community
Advanced
hulusi-tunchulusi-tunc
3

component-spec

Generate component specifications with anatomy, variants, states, and accessibility guidelines.

Community
Advanced
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
shekerkammashekerkamma

workflow-visualizer

Convert plain text workflow descriptions into interactive HTML diagrams.

Community
Intermediate