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

{
  "context": "This criteria evaluates how well the engineer uses @radix-ui/react-tooltip to implement device-aware tooltip behavior, specifically focusing on touch event filtering to differentiate between desktop hover and mobile touch interactions.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "TooltipProvider usage",
      "description": "Uses the TooltipProvider component to wrap the application or component tree, enabling tooltip functionality",
      "max_score": 10
    },
    {
      "name": "Tooltip root component",
      "description": "Uses the Tooltip (or Root) component to create the tooltip instance",
      "max_score": 10
    },
    {
      "name": "TooltipTrigger implementation",
      "description": "Uses TooltipTrigger (or Trigger) component to wrap the help icon button that triggers the tooltip",
      "max_score": 15
    },
    {
      "name": "TooltipContent implementation",
      "description": "Uses TooltipContent (or Content) component to display the help text with proper positioning",
      "max_score": 15
    },
    {
      "name": "Touch event filtering",
      "description": "Leverages the package's built-in touch event filtering behavior (which ignores pointer events where pointerType === 'touch'), ensuring tooltips only appear on desktop hover and keyboard focus, not on mobile touch",
      "max_score": 30
    },
    {
      "name": "Positioning configuration",
      "description": "Configures the tooltip to appear above the trigger using the 'side' prop on TooltipContent (e.g., side=\"top\")",
      "max_score": 10
    },
    {
      "name": "Accessibility support",
      "description": "Ensures keyboard accessibility by relying on the package's built-in focus handling, allowing tooltips to display when the trigger receives keyboard focus",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

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

tile.json