tessl/npm-radix-ui--react-tooltip
A React tooltip component from Radix UI Primitives, part of an open-source UI component library for building high-quality, accessible design systems and web apps
Overall
score
96%
Evaluation results
100%
20%Scrollable Dashboard Help System
Automatic scroll-based closing
TooltipProvider usage
100%
100%
Tooltip composition
100%
100%
TooltipTrigger implementation
100%
100%
TooltipPortal usage
100%
100%
TooltipContent rendering
100%
100%
Scrollable container
100%
100%
Multiple sections
100%
100%
Scroll dismissal
20%
100%
98%
Keyboard-Accessible Help System
Keyboard accessibility with focus and blur events
Component composition
100%
100%
Focus triggering
90%
90%
Blur handling
100%
100%
Escape key handling
100%
100%
ARIA role
100%
100%
ARIA describedby relationship
100%
100%
Portal usage
100%
100%
Trigger element setup
100%
100%
100%
Interactive Button Tooltips
Component composition with Provider, Root, Trigger, Portal, Content, and Arrow
TooltipProvider usage
100%
100%
Tooltip (Root) usage
100%
100%
TooltipTrigger usage
100%
100%
TooltipPortal usage
100%
100%
TooltipContent usage
100%
100%
TooltipArrow usage
100%
100%
Correct nesting
100%
100%
85%
Multi-Tooltip Configuration Dashboard
Provider-level configuration for shared settings
TooltipProvider usage
100%
100%
delayDuration configuration
100%
100%
skipDelayDuration configuration
100%
100%
disableHoverableContent configuration
0%
0%
Multiple Tooltip instances
100%
100%
Component composition
100%
100%
90%
-10%Help Button Tooltip
Basic dismissal on escape, blur, click, and scroll
TooltipProvider usage
100%
100%
Tooltip component
100%
100%
TooltipTrigger usage
100%
100%
TooltipPortal usage
100%
100%
TooltipContent usage
100%
100%
Escape dismissal
100%
100%
Blur dismissal
100%
100%
Click dismissal
100%
50%
Scroll dismissal
100%
50%
Component composition
100%
100%
100%
10%Animated Tooltip Component
Animation-aware CSS variables with transform origin
Component Structure
100%
100%
CSS Variable Usage
100%
100%
Scale Animation
100%
100%
Fade Animation
100%
100%
State-Based Styling
33%
100%
Positioning Configuration
100%
100%
100%
Directional Info Card
Basic positioning relative to trigger (top, right, bottom, left)
TooltipProvider usage
100%
100%
Tooltip root component
100%
100%
TooltipTrigger implementation
100%
100%
TooltipPortal usage
100%
100%
TooltipContent implementation
100%
100%
Side prop usage
100%
100%
90%
12%Device-Aware Help Icon
Touch event filtering for mobile behavior
TooltipProvider usage
100%
100%
Tooltip root component
100%
100%
TooltipTrigger implementation
100%
100%
TooltipContent implementation
100%
100%
Touch event filtering
33%
66%
Positioning configuration
100%
100%
Accessibility support
80%
100%
100%
User Profile Card with Hover Tooltips
Hover interaction with pointer event handling
TooltipProvider usage
100%
100%
Tooltip component structure
100%
100%
TooltipTrigger implementation
100%
100%
TooltipContent rendering
100%
100%
Delay duration configuration
100%
100%
Portal usage
100%
100%
Hover interaction
100%
100%
100%
20%Tooltip Manager Component
Disable hoverable content toggle
TooltipProvider usage
100%
100%
Global disableHoverableContent
0%
100%
Multiple Tooltip instances
100%
100%
TooltipTrigger usage
100%
100%
TooltipContent usage
100%
100%
Per-tooltip override
100%
100%
Component composition
100%
100%
Install with Tessl CLI
npx tessl i tessl/npm-radix-ui--react-tooltip- Evaluated
- Agent
- Codex