CtrlK
BlogDocsLog inGet started
Tessl Logo

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%

Overview
Eval results
Files

rubric.jsonevals/scenario-9/

{
  "context": "This criteria evaluates the engineer's proficiency in using @radix-ui/react-tooltip for implementing hover interactions with pointer event handling, including proper component composition, delay configuration, and hover trigger setup.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "TooltipProvider usage",
      "description": "Uses TooltipProvider component to wrap the profile card and provide shared tooltip configuration",
      "max_score": 15
    },
    {
      "name": "Tooltip component structure",
      "description": "Correctly uses Tooltip component as the container for each tooltip instance to manage individual tooltip state",
      "max_score": 15
    },
    {
      "name": "TooltipTrigger implementation",
      "description": "Uses TooltipTrigger component to wrap each hover-triggerable element (username, status badge, and action buttons)",
      "max_score": 15
    },
    {
      "name": "TooltipContent rendering",
      "description": "Uses TooltipContent component to display the tooltip text with proper content for each tooltip instance",
      "max_score": 15
    },
    {
      "name": "Delay duration configuration",
      "description": "Correctly configures delayDuration prop on Tooltip or TooltipProvider to implement the specified delays (500ms for username, 300ms for status, 200ms for buttons)",
      "max_score": 20
    },
    {
      "name": "Portal usage",
      "description": "Uses TooltipPortal component to render tooltip content outside the DOM hierarchy for proper z-index handling",
      "max_score": 10
    },
    {
      "name": "Hover interaction",
      "description": "Tooltips correctly appear on pointer hover over trigger elements without requiring additional event handlers (relies on built-in onPointerMove behavior)",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-radix-ui--react-tooltip

tile.json