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-1/

{
  "context": "This evaluation assesses whether the engineer correctly uses @radix-ui/react-tooltip components to build a scrollable dashboard with tooltips that automatically dismiss on scroll. The focus is on proper component composition and leveraging the package's built-in scroll detection capability.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "TooltipProvider usage",
      "description": "Uses TooltipProvider (or Tooltip.Provider) component to wrap the dashboard or tooltip instances, enabling shared tooltip configuration",
      "max_score": 10
    },
    {
      "name": "Tooltip composition",
      "description": "Uses Tooltip (or Tooltip.Root) component to create individual tooltip instances with proper component nesting",
      "max_score": 15
    },
    {
      "name": "TooltipTrigger implementation",
      "description": "Uses TooltipTrigger (or Tooltip.Trigger) component as the interactive element that triggers tooltip display on hover",
      "max_score": 15
    },
    {
      "name": "TooltipPortal usage",
      "description": "Uses TooltipPortal (or Tooltip.Portal) component to render tooltip content outside the parent DOM hierarchy, preventing z-index and overflow issues",
      "max_score": 10
    },
    {
      "name": "TooltipContent rendering",
      "description": "Uses TooltipContent (or Tooltip.Content) component to render the actual tooltip content with descriptive text",
      "max_score": 15
    },
    {
      "name": "Scrollable container",
      "description": "Implements a scrollable container element with appropriate styling (overflow and height constraints) that contains the dashboard sections",
      "max_score": 5
    },
    {
      "name": "Multiple sections",
      "description": "Renders at least 5 dashboard sections with help buttons inside the scrollable container",
      "max_score": 5
    },
    {
      "name": "Scroll dismissal",
      "description": "Tooltips automatically close when scrolling occurs without any custom scroll event handlers (relies on the package's built-in scroll detection)",
      "max_score": 25
    }
  ]
}

Install with Tessl CLI

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

tile.json