{
  "context": "This criteria evaluates how well the engineer uses the @radix-ui/react-tooltip package to implement a button group with tooltips. It focuses specifically on proper component composition using TooltipProvider, Tooltip (Root), TooltipTrigger, TooltipPortal, TooltipContent, and TooltipArrow components according to the package's composable API.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "TooltipProvider usage",
      "description": "Uses TooltipProvider component to wrap the button group or application, enabling shared tooltip configuration across all tooltips",
      "max_score": 15
    },
    {
      "name": "Tooltip (Root) usage",
      "description": "Uses Tooltip (or Root) component for each button to create individual tooltip instances that manage state",
      "max_score": 20
    },
    {
      "name": "TooltipTrigger usage",
      "description": "Uses TooltipTrigger component to wrap each button element, making it the interactive element that triggers tooltip display",
      "max_score": 20
    },
    {
      "name": "TooltipPortal usage",
      "description": "Uses TooltipPortal component to render tooltip content outside the parent DOM hierarchy, avoiding layout issues",
      "max_score": 15
    },
    {
      "name": "TooltipContent usage",
      "description": "Uses TooltipContent component to render the actual tooltip content with proper positioning",
      "max_score": 15
    },
    {
      "name": "TooltipArrow usage",
      "description": "Uses TooltipArrow component inside TooltipContent to render a visual arrow pointing to the trigger button",
      "max_score": 10
    },
    {
      "name": "Correct nesting",
      "description": "Components are properly nested following the correct hierarchy: Provider wraps Tooltip(s), each Tooltip contains Trigger and Portal, Portal contains Content, Content contains Arrow",
      "max_score": 5
    }
  ]
}