{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-story",
  "title": "Tooltip Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating tooltip component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ui/tooltip-story/tooltip-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { Plus } from \"lucide-react\";\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\n\n/**\n * A popup that displays information related to an element when the element\n * receives keyboard focus or the mouse hovers over it.\n */\nconst meta: Meta<typeof TooltipContent> = {\n  title: \"ui/base/Tooltip\",\n  component: TooltipContent,\n  tags: [\"autodocs\"],\n  argTypes: {\n    side: {\n      options: [\"top\", \"bottom\", \"left\", \"right\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      control: \"text\",\n    },\n  },\n  args: {\n    side: \"top\",\n    children: \"Add to library\",\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  render: (args) => (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger>\n          <Plus className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Add</span>\n        </TooltipTrigger>\n        <TooltipContent {...args} />\n      </Tooltip>\n    </TooltipProvider>\n  ),\n} satisfies Meta<typeof TooltipContent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the tooltip.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `bottom` side to display the tooltip below the element.\n */\nexport const Bottom: Story = {\n  args: {\n    side: \"bottom\",\n  },\n};\n\n/**\n * Use the `left` side to display the tooltip to the left of the element.\n */\nexport const Left: Story = {\n  args: {\n    side: \"left\",\n  },\n};\n\n/**\n * Use the `right` side to display the tooltip to the right of the element.\n */\nexport const Right: Story = {\n  args: {\n    side: \"right\",\n  },\n};\n\nexport const ShouldShowOnHover: Story = {\n  name: \"when hovering over trigger, should show hover tooltip content\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n    const triggerBtn = await canvasBody.findByRole(\"button\", { name: /add/i });\n\n    await step(\"hover over trigger\", async () => {\n      await userEvent.hover(triggerBtn);\n      await waitFor(() =>\n        expect(\n          canvasElement.ownerDocument.body.querySelector(\n            \"[data-slot=tooltip-content]\",\n          ),\n        ).toBeVisible(),\n      );\n    });\n\n    await step(\"unhover trigger\", async () => {\n      await userEvent.unhover(triggerBtn);\n      await waitFor(() => {\n        const tooltipElement = canvasElement.ownerDocument.body.querySelector(\n          \"[data-slot=tooltip-content]\",\n        );\n        expect(tooltipElement).toBeNull();\n      });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "tooltip",
    "overlay"
  ],
  "type": "registry:component"
}