skills.rest
coco-de
coco-deOFFICIAL
Explore all skills by this author →
GitHub

coui-hover-card

Create hover-triggered information cards with CoUI components in Flutter and Web applications.

Updated Aug 27, 2026
Search Tags:#flutter#ui component#web#tooltip#coui#hover card
One-click install
npx skills add https://github.com/coco-de/skills --skill coui-hover-card
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coui-hover-card
Source: https://github.com/coco-de/skills/tree/main/plugins/cc-coui/skills/coui-hover-card
Command: npx skills add https://github.com/coco-de/skills --skill coui-hover-card

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation of interactive hover cards, allowing users to display rich content like tooltips or previews without cluttering the main interface.

Core Features & Use Cases

  • Dynamic Content Display: Show detailed information on hover, such as user profiles or additional context.
  • Configurable Delays: Control when the card appears and disappears to prevent accidental triggers.
  • Cross-Platform Consistency: Works seamlessly in both Flutter and Web applications using CoUI.
  • Use Case: Displaying a user's avatar, name, and title when hovering over their username in a chat application.

Quick Start

Create a hover card that shows a user's profile information when hovering over their username.

Frequently Asked Questions about coui-hover-card

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

FAQPage Schema
How do I create a hover card in Flutter to display user profile information?▼

You can create a hover card in Flutter using CoUI components to display rich content like user profiles on hover. It enables dynamic information previews with configurable open and close delays to prevent accidental triggers.

What is a hover card used for in web and Flutter applications?▼

A hover card is used to display rich content such as tooltips, user profiles, and contextual previews in web and Flutter applications. It dynamically reveals detailed information on hover to keep the main interface clean and uncluttered.

Can I control the open and close delays for hover-triggered tooltips in Flutter?▼

Yes, you can control open and close delays for hover-triggered tooltips and rich content popups. Configurable delays prevent accidental triggers, ensuring hover cards appear and disappear smoothly as users move their cursor across the interface.

Does the CoUI hover card component work for both Flutter and Web applications?▼

Yes, the CoUI hover card component works seamlessly for both Flutter and Web applications. It provides cross-platform consistency, allowing you to implement interactive hover-triggered information cards and rich content popups across both platforms.

What is the best way to show contextual previews without cluttering the main UI in Flutter?▼

The best way to show contextual previews without UI clutter is using hover-triggered information cards. By displaying rich content like tooltips or user profiles only on hover with configurable delays, the main interface remains clean and focused.

Why do my hover cards trigger accidentally when users move their mouse across the UI in web apps?▼

Hover cards trigger accidentally when open and close delays are not properly configured. You can prevent this by adjusting the configurable open and close delays for your hover-triggered popups, ensuring intentional user interaction before content displays.

Related Skills

Explore More Design & Creative Skills→
bear2ubear2u
905

flutter-init

Automate Flutter project setup with Clean Architecture and Riverpod.

Community
Intermediate
jiaiyanjiaiyan
8

n-card

Create configurable Naive UI card components with slots and props.

Community
Intermediate
jiaiyanjiaiyan
8

n-popover

Display floating content anchored to triggers in Naive UI popovers.

Community
Intermediate
jiaiyanjiaiyan
21

el-popover

Display rich content in configurable popovers for Vue 3 applications.

Community
Advanced