Tooltip

npx shadcn@latest add https://docs.nasaqui.com/r/tooltip.json

import { Tooltip, TooltipProvider } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import { Button, Tooltip } from "@fadymondy/nasaq/web";
import { Settings } from "lucide-react";

export function SettingsButton() {
  return (
    <Tooltip content="Settings">
      <Button size="icon" variant="ghost" aria-label="Settings">
        <Settings />
      </Button>
    </Tooltip>
  );
}

Tooltip (shorthand)
├─ TooltipRoot                 Base UI Tooltip.Root
│  ├─ TooltipTrigger           Base UI Tooltip.Trigger, render={children}
│  └─ TooltipContent           Portal + positioner + popup   data-slot="tooltip-content"
TooltipProvider                Base UI Tooltip.Provider (optional; shares delay across tooltips)

import { Button, Tooltip } from "@fadymondy/nasaq/web";

export function Placement() {
  return (
    <div className="flex gap-3 p-10">
      <Tooltip content="Shown below" side="bottom">
        <Button>Hover me</Button>
      </Tooltip>
      <Tooltip content="Beside, at the inline end" side="inline-end">
        <Button>Inline end</Button>
      </Tooltip>
    </div>
  );
}

import { Button, Tooltip, TooltipProvider } from "@fadymondy/nasaq/web";
import { Pencil, Trash2 } from "lucide-react";

export function Toolbar() {
  return (
    <TooltipProvider delay={300}>
      <div className="flex gap-1">
        <Tooltip content="تعديل">
          <Button size="icon-sm" variant="ghost" aria-label="تعديل">
            <Pencil />
          </Button>
        </Tooltip>
        <Tooltip content="حذف">
          <Button size="icon-sm" variant="ghost" aria-label="حذف">
            <Trash2 />
          </Button>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

import { Button, TooltipContent, TooltipRoot, TooltipTrigger } from "@fadymondy/nasaq/web";

export function Composed() {
  return (
    <TooltipRoot>
      <TooltipTrigger render={<Button variant="ghost" />}>Info</TooltipTrigger>
      <TooltipContent side="bottom" sideOffset={10}>
        Extra detail
      </TooltipContent>
    </TooltipRoot>
  );
}