skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Tooltip

Implement a customizable React Tooltip with portal rendering and viewport flipping.

Updated Aug 27, 2026
Search Tags:#frontend#react#design system#ui component#ux#tooltip
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-tooltip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Tooltip
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Tooltip
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-tooltip

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust and flexible Tooltip component to display contextual information or guidance to users when they interact with UI elements, improving usability and user experience.

Core Features & Use Cases

  • Contextual Information: Display helpful messages on hover or focus.
  • Flexible Placement: Supports top, bottom, left, and right placements with automatic viewport flipping.
  • Customizable Appearance: Offers different sizes and text alignment options.
  • Controlled & Uncontrolled Modes: Can be managed externally or operate independently.
  • Use Case: Add a tooltip to a small icon button to explain its function, or to a form field to provide validation hints.

Quick Start

Use the Tooltip component to display 'This is a helpful tip.' when hovering over the 'Info' button.

Frequently Asked Questions about use-design-system/Tooltip

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

FAQPage Schema
How do I add a React tooltip to a UI element for contextual information?▼

To add a React tooltip, implement a customizable tooltip component that triggers on hover or focus to display contextual messages. This provides helpful guidance directly associated with specific UI elements.

Can I control tooltip placement and prevent it from rendering off-screen in React?▼

Yes, you can control tooltip placement using top, bottom, left, and right positions. The component supports automatic viewport flipping to prevent rendering off-screen.

How does portal rendering work for tooltips in a React design system?▼

Portal rendering for tooltips transports the tooltip DOM node outside its parent component hierarchy. This prevents clipping by parent containers and ensures the tooltip displays correctly above other UI elements.

Does this React tooltip component support controlled and uncontrolled modes?▼

Yes, this React tooltip component supports both controlled and uncontrolled modes. You can manage its visibility externally via state or let it operate independently based on hover and focus triggers.

What are the limitations of using tooltips for form validation hints?▼

Tooltips for form validation hints require hover or focus interaction, making them inaccessible on touch devices without interaction. They are best used for supplementary guidance rather than critical validation messages.

What is the best way to customize tooltip appearance in a React UI component?▼

The best way to customize tooltip appearance is using built-in size and text alignment options. These configurable properties allow you to match the tooltip styling to your UI design system.

Related Skills

Explore More Design & Creative Skills→
jiaiyanjiaiyan
8

n-tooltip

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

Community
Advanced
jiaiyanjiaiyan
21

el-tooltip

Display contextual hints on hover using Element Plus tooltips.

Community
Intermediate
tchiphuongtchiphuong

heroui-overlays

Create Hero UI overlay components for React frontends.

Community
Intermediate
dmccrearydmccreary
90

math-function-plotter-plotly

Generate interactive Plotly.js function plots with hover tooltips and sliders.

Community
Advanced