---
import DocLayout from "../../layouts/DocLayout.astro";
import Heading from "../../components/docs/Heading.astro";
import ComponentSection from "../../components/docs/ComponentSection.astro";
import ComponentExample from "../../components/docs/ComponentExample.astro";
import CodeBlock from "../../components/docs/CodeBlock.astro";
import PropsTable from "../../components/docs/PropsTable.astro";
import { TooltipHeroDemo, TooltipBasicDemo, TooltipMultipleDemo, TooltipCustomTriggerDemo } from "../../components/demos/TooltipDemo";
---

<DocLayout
  title="Tooltip"
  description="A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
  sourceFile="components/tooltip"
  baseUIComponent="tooltip"
>
  <ComponentSection>
    <ComponentExample code={`<TooltipProvider>
  <Tooltip content="Add new item" asChild>
    <Button shape="square" icon={PlusIcon} />
  </Tooltip>
</TooltipProvider>`}>
      <TooltipHeroDemo client:load />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={2}>Installation</Heading>
    <Heading level={3} class="mb-2 text-lg">Barrel</Heading>
    <CodeBlock code={`import { Tooltip, TooltipProvider } from "@cloudflare/kumo";`} lang="tsx" />
    <h3 class="mt-4 mb-2 text-lg font-semibold">Granular</h3>
    <CodeBlock code={`import { Tooltip, TooltipProvider } from "@cloudflare/kumo/components/tooltip";`} lang="tsx" />
  </ComponentSection>

  <ComponentSection>
    <Heading level={2}>Usage</Heading>
    <CodeBlock code={`import { Tooltip, TooltipProvider, Button } from "@cloudflare/kumo";

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip content="Tooltip text" asChild>
        <Button>Hover me</Button>
      </Tooltip>
    </TooltipProvider>
  );
}`} lang="tsx" />
  </ComponentSection>

  <ComponentSection>
    <Heading level={2} class="mb-6">Examples</Heading>

    <div class="space-y-8">
      <div>
        <Heading level={3}>Basic Tooltip</Heading>
        <ComponentExample code={`<TooltipProvider>
  <Tooltip content="Add" asChild>
    <Button shape="square" icon={PlusIcon} />
  </Tooltip>
</TooltipProvider>`}>
          <TooltipBasicDemo client:load />
        </ComponentExample>
      </div>

      <div>
        <Heading level={3}>Multiple Tooltips</Heading>
        <ComponentExample code={`<TooltipProvider>
  <div className="flex gap-2">
    <Tooltip content="Add" asChild>
      <Button shape="square" icon={PlusIcon} />
    </Tooltip>
    <Tooltip content="Change language" asChild>
      <Button shape="square" icon={TranslateIcon} />
    </Tooltip>
  </div>
</TooltipProvider>`}>
          <TooltipMultipleDemo client:load />
        </ComponentExample>
      </div>
    </div>
  </ComponentSection>

  <ComponentSection>
    <Heading level={2} class="mb-6">Custom Trigger</Heading>
    <p class="mb-4 text-sm text-kumo-subtle">
      We recommend using <code>asChild</code> with a Kumo Button (as shown above). However, when <code>asChild</code> is omitted, 
      Tooltip wraps children in an internal button element. Defensive styles are applied to protect this element from 
      global CSS pollution. You can override these defaults via <code>className</code>.
    </p>
    <ComponentExample code={`<Tooltip
  content="Click to learn more"
  className="inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95"
>
  <Info className="size-4" />
  <span>Help</span>
</Tooltip>`}>
      <TooltipCustomTriggerDemo client:load />
    </ComponentExample>
  </ComponentSection>

  <ComponentSection>
    <Heading level={2}>API Reference</Heading>
    <PropsTable component="Tooltip" />
  </ComponentSection>
</DocLayout>
