feat(animated-tooltip): add accessible animated tooltip with customiz…#77
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 44 minutes and 3 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis PR introduces a new ChangesAnimatedTooltip Component
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
registry.json (1)
4202-4202: ⚡ Quick winExpose wrapper HTML/motion props on
AnimatedTooltipPropsfor registry consistency.
AnimatedTooltipPropsis currently standalone, so consumers cannot pass common wrapper props (id,data-*,aria-*, etc.) in a typed way. Please extend the relevant HTML/motion props interface and omit conflicting handlers/props to match the registry component contract.As per coding guidelines, "Extend the relevant HTML/motion props interface and omit conflicting event handlers in TypeScript components."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@registry.json` at line 4202, AnimatedTooltipProps must allow standard wrapper HTML/motion props but currently doesn't; update the AnimatedTooltipProps type to extend the appropriate element props (e.g., React.HTMLAttributes<HTMLSpanElement>) and motion props (e.g., MotionProps or Partial<MotionProps>) while Omit-ing/conflicting handlers used internally (onMouseEnter, onMouseLeave, onFocus, onBlur, and aria-describedby) so consumers can pass id/data-*/aria-* etc.; then accept a rest props parameter in the AnimatedTooltip function signature and spread those remaining props onto the outer wrapper span (and/or appropriate motion span) so external attributes are forwarded without overriding the component's internal event handlers (refer to AnimatedTooltipProps, AnimatedTooltip, and the outer wrapper span/motion.span usage).Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/www/components/ui/animated-tooltip.tsx`:
- Around line 176-178: The cloneElement call for trigger currently overwrites
any existing aria-describedby; update the logic in the React.cloneElement usage
(where trigger is created from children and tooltipId is used) to merge IDs
instead of replacing: read the child's existing aria-describedby
(children.props['aria-describedby'] or attributes), split into unique IDs,
append tooltipId only when open, join with spaces, and when closed restore the
original IDs or set undefined if none remain; ensure types/casting around
React.HTMLAttributes<HTMLElement> are handled safely so the merged string is
assigned to aria-describedby.
In `@registry/animated-tooltip/component.tsx`:
- Around line 176-178: The clone of the trigger element (created in
React.cloneElement within the trigger variable) overwrites any existing
aria-describedby instead of merging IDs; change the logic to read the trigger's
existing aria-describedby from children.props (or existingAttrs), split it into
ID tokens, add tooltipId when open (ensuring no duplicates), and when closed
remove the tooltipId leaving other IDs intact, then pass the merged string (or
undefined if empty) as the aria-describedby prop to React.cloneElement so other
descriptions are preserved.
---
Nitpick comments:
In `@registry.json`:
- Line 4202: AnimatedTooltipProps must allow standard wrapper HTML/motion props
but currently doesn't; update the AnimatedTooltipProps type to extend the
appropriate element props (e.g., React.HTMLAttributes<HTMLSpanElement>) and
motion props (e.g., MotionProps or Partial<MotionProps>) while
Omit-ing/conflicting handlers used internally (onMouseEnter, onMouseLeave,
onFocus, onBlur, and aria-describedby) so consumers can pass id/data-*/aria-*
etc.; then accept a rest props parameter in the AnimatedTooltip function
signature and spread those remaining props onto the outer wrapper span (and/or
appropriate motion span) so external attributes are forwarded without overriding
the component's internal event handlers (refer to AnimatedTooltipProps,
AnimatedTooltip, and the outer wrapper span/motion.span usage).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 18ba8eee-413e-4c81-bcc5-c5fc1d19d97c
📒 Files selected for processing (22)
apps/www/components/ui/animated-tooltip.tsxapps/www/config/components.tsapps/www/config/demos.tsxapps/www/config/docs-scenarios.tsapps/www/public/r/animated-tooltip.jsonapps/www/public/r/registry.jsonapps/www/public/registry.jsonapps/www/public/registry/animated-tabs.jsonapps/www/public/registry/animated-tooltip.jsonapps/www/public/registry/changelogs.jsonapps/www/public/registry/drawer-slide.jsonapps/www/public/registry/index.jsonapps/www/public/registry/morphing-modal.jsonapps/www/public/registry/multi-step-auth-card.jsonapps/www/public/registry/notification-stack.jsonregistry.jsonregistry/animated-tooltip/component.tsxregistry/animated-tooltip/demo.tsxregistry/components/animated-tooltip.jsonregistry/demos/demo-key-order.jsonregistry/demos/shared.tsxregistry/manifest.json
1 participant
Type
Summary
Adds
animated-tooltip— a self-contained, spring-animated tooltip for wrapping a single focusable trigger (button, link, icon button). It follows the WAI-ARIA tooltip pattern (role="tooltip",aria-describedbywhile open, hover + keyboard focus, Escape to dismiss) and supports independent styling of bubble background, text, and pointing arrow across all four sides with start/center/end alignment.Why: fills a common overlay primitive in the library with motion-first polish and audited accessibility metadata, installable via
npx uniqueui add animated-tooltip.Highlights
useReducedMotion— spring scale/translate in default mode; opacity-only fade when reduced motion is preferredside,align,background,color,arrowColor,arrow,arrowSize,offset,delay,disabled,classNamearia-hiddenScreenshots / video (UI changes only)
N/A in PR — verify on the component docs page after merge.
Test plan
pnpm test— turbo: all 4 workspace packages passpnpm build:registry— succeeds; syncsapps/www/components/ui/animated-tooltip.tsx, public registry, and shadcnr/*artifactspnpm --filter uniqueui-cli build— not run; no CLI source changesapps/wwwdev server — not run in this sessionAdditional checks
pnpm test:repo— 66 passedpnpm --dir apps/www test— 92 passed (component-syncincludes new slug)pnpm registry:validate— 66 entries, 66 shadcn items OKpnpm check:reduced-motion— 58 motion components covered (includesanimated-tooltip)New component checklist
Registry sources
registry/animated-tooltip/component.tsxcreatedregistry/components/animated-tooltip.jsoncreated —registry+docsblocks, metadata (tags,peerDependencies,compatibility,accessibility,motion,changelog)orderanddocsOrderinregistry/manifest.jsonregistry/animated-tooltip/demo.tsx+"animated-tooltip"inregistry/demos/demo-key-order.json; import inregistry/demos/shared.tsxpnpm build:registryrun — generatedapps/www/public/registry/*,apps/www/public/r/*, andapps/www/components/ui/animated-tooltip.tsxcommittedComponent quality gate (Section I from
backlogs.md)"use client"at top (hooks, Motion, DOM events)classNameand merges viacnAnimatedTooltipProps; trigger cloned witharia-describedbymotionfrommotion/react; spring enter/exituseReducedMotionwith opacity-only fallbackAnimatePresence)setTimeoutandkeydownlistener cleaned up on unmount/blurwindow/document;documentonly in open-state effectaria-hiddenanimated-tooltipentry inapps/www/tests/*yet)Related issues
New component — no linked issue.
Install:
npx uniqueui add animated-tooltipCommits (1)
8112abcfeat(animated-tooltip): add accessible animated tooltip with customizable arrowSummary by CodeRabbit
New Features