or run

npx @tessl/cli init
Log in

Version

Files

docs

arrow.mdindex.mdportal-content.mdprovider.mdtooltip-root.mdtrigger.mdutilities.md
tile.json

rubric.jsonevals/scenario-2/

{
  "context": "This criteria evaluates how well the engineer uses the @radix-ui/react-tooltip package to implement directional positioning of tooltips. The focus is on proper usage of the tooltip components and the side positioning prop.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "TooltipProvider usage",
      "description": "Uses TooltipProvider component to wrap the tooltip implementation, establishing the tooltip context",
      "max_score": 10
    },
    {
      "name": "Tooltip root component",
      "description": "Uses Tooltip (or Root) component as the container for each tooltip instance",
      "max_score": 15
    },
    {
      "name": "TooltipTrigger implementation",
      "description": "Uses TooltipTrigger (or Trigger) component to wrap the button element that triggers the tooltip on hover",
      "max_score": 15
    },
    {
      "name": "TooltipPortal usage",
      "description": "Uses TooltipPortal (or Portal) component to render tooltip content outside the DOM hierarchy, preventing z-index and overflow issues",
      "max_score": 10
    },
    {
      "name": "TooltipContent implementation",
      "description": "Uses TooltipContent (or Content) component to render the actual information card content with proper positioning",
      "max_score": 20
    },
    {
      "name": "Side prop usage",
      "description": "Correctly uses the 'side' prop on TooltipContent to control positioning direction, mapping the component's 'direction' prop to the tooltip's 'side' prop with values 'top', 'right', 'bottom', or 'left'",
      "max_score": 30
    }
  ]
}