Tooltip

1import { Tooltip } from "@/components/ui/tooltip"23export function TooltipBasicDemo() {4  return (5    <Tooltip content="This is a tooltip" id="tooltip-basic">6      <span className="underline decoration-dotted cursor-help">7        Hover me8      </span>9    </Tooltip>10  )11}

1import { Tooltip } from "@/components/ui/tooltip"2import { Button } from "@/components/ui/button"34export function TooltipButtonDemo() {5  return (6    <Tooltip content="Keyboard accessible tooltip" id="tooltip-button">7      <Button>Hover or Focus</Button>8    </Tooltip>9  )10}

1import { Tooltip } from "@/components/ui/tooltip"2import { Button } from "@/components/ui/button"34export function TooltipIconDemo() {5  return (6    <div className="flex items-center gap-2">7      <Tooltip content="Bold" id="tooltip-icon-bold">8        <Button variant="outline" size="icon">9          <span className="font-bold">B</span>10        </Button>11      </Tooltip>12      <Tooltip content="Italic" id="tooltip-icon-italic">13        <Button variant="outline" size="icon">14          <span className="italic">I</span>15        </Button>16      </Tooltip>17      <Tooltip content="Underline" id="tooltip-icon-underline">18        <Button variant="outline" size="icon">19          <span className="underline">U</span>20        </Button>21      </Tooltip>22    </div>23  )24}

1import { Tooltip } from "@/components/ui/tooltip"2import { Button } from "@/components/ui/button"34export function TooltipPlacementDemo() {5  return (6    <div className="flex flex-wrap gap-4">7      <Tooltip content="Top placement" placement="top">8        <Button variant="outline">Top</Button>9      </Tooltip>10      <Tooltip content="Right placement" placement="right">11        <Button variant="outline">Right</Button>12      </Tooltip>13      <Tooltip content="Bottom placement" placement="bottom">14        <Button variant="outline">Bottom</Button>15      </Tooltip>16      <Tooltip content="Left placement" placement="left">17        <Button variant="outline">Left</Button>18      </Tooltip>19    </div>20  )21}

1import { Tooltip } from "@/components/ui/tooltip"23export function TooltipDelayDemo() {4  return (5    <div className="flex flex-wrap gap-8">6      <Tooltip content="This tooltip has a 700ms delay" delayDuration={700}>7        <span className="underline decoration-dotted cursor-help">8          Hover me (700ms delay)9        </span>10      </Tooltip>11      <Tooltip content="This tooltip appears immediately" delayDuration={0}>12        <span className="underline decoration-dotted cursor-help">13          Hover me (no delay)14        </span>15      </Tooltip>16    </div>17  )18}