skills.rest
serverpod
serverpodOFFICIAL
Explore all skills by this author →
Website𝕏@ServerpodDevGitHub

shadcn_ui-tooltip

Implement hover and focus tooltips for Flutter shadcn_ui components.

8|Updated Mar 7, 2026
Search Tags:#user experience#ui components#flutter#tooltip#hover effects#shadcn_ui
One-click install
npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-tooltip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn_ui-tooltip
Source: https://github.com/serverpod/skills-registry/tree/main/skills/shadcn_ui/shadcn_ui-tooltip
Command: npx skills add https://github.com/serverpod/skills-registry --skill shadcn-ui-tooltip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to easily add informative tooltips to interactive elements in Flutter applications built with the shadcn_ui component library, enhancing user experience by providing context on hover or focus.

Core Features & Use Cases

  • Contextual Information: Display helpful text when a user hovers over or focuses on a specific UI element.
  • Trigger Flexibility: Works with various trigger widgets, including buttons and images, with specific handling for non-interactive elements.
  • Use Case: When a user hovers over a small icon button in a shadcn_ui Flutter app, a tooltip appears with text like "Settings" or "Edit Profile".

Quick Start

Use ShadTooltip to display 'Add to library' when hovering over a ShadButton.

Frequently Asked Questions about shadcn_ui-tooltip

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

FAQPage Schema
How do I add hover tooltips to Flutter shadcn_ui components?▼

To add hover tooltips in Flutter shadcn_ui, use the ShadTooltip widget to display informative text when users hover over or focus on specific UI elements. This enhances user experience by providing contextual guidance within the application.

Can I show a tooltip on non-interactive elements like images in Flutter?▼

Yes, you can display tooltips on non-interactive elements in Flutter by wrapping them with ShadGestureDetector. This provides the necessary hover functionality for triggers like images that do not natively support hover events.

Do I need ShadGestureDetector for shadcn_ui tooltips on buttons?▼

No, you do not need ShadGestureDetector for interactive triggers like buttons. ShadTooltip works directly with interactive shadcn_ui components, while ShadGestureDetector is specifically required only for non-interactive elements.

What is the best way to provide contextual information for small icon buttons in Flutter?▼

The best way to provide contextual information for small icon buttons in a shadcn_ui Flutter app is using ShadTooltip. It displays helpful text like "Settings" or "Edit Profile" when a user hovers over the specific icon.

Does shadcn_ui tooltip support focus events for user guidance?▼

Yes, shadcn_ui tooltip supports focus events for user guidance. The ShadTooltip widget is designed to display contextual information not only on hover but also when a user focuses on the UI element.

Related Skills

Explore More Software Engineering Skills→
sebach0sebach0

shadcn-ui-flutter

Provide Flutter UI components with theming and customization.

Community
Intermediate
lvmplvmp

ui-integration

Integrate Flame game engine with Flutter UI components for mobile games.

Community
Intermediate
serverpodserverpod
8

shadcn_ui-icon-button

Create icon-only buttons with variants, loading states, gradients, and shadows in Flutter shadcn_ui.

Official
Basic
dmccrearydmccreary
90

math-function-plotter-plotly

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

Community
Advanced