tooltip

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tooltip/Tooltip.astro directly.
3/**
4 * @component Tooltip
5 * @title Tooltip
6 * @description A small popup that appears when hovering over or focusing on an element. Positioning is computed in JavaScript.
7 *
8 * @preview
9 *
10 * <Tooltip>
11 *   <TooltipTrigger asChild>
12 *     <Button variant="outline">Hover</Button>
13 *   </TooltipTrigger>
14 *   <TooltipContent>
15 *     <p>Add to library</p>
16 *   </TooltipContent>
17 * </Tooltip>
18 *
19 * @usage
20 *
21 * ```astro nocollapse
22 * ---
23 * import { Tooltip, TooltipTrigger, TooltipContent } from '@bejamas/ui/components/tooltip';
24 * import { Button } from '@bejamas/ui/components/button';
25 * ---
26 *
27 * <Tooltip>
28 *   <TooltipTrigger asChild>
29 *     <Button variant="outline">Hover</Button>
30 *   </TooltipTrigger>
31 *   <TooltipContent>
32 *     <p>Add to library</p>
33 *   </TooltipContent>
34 * </Tooltip>
35 * ```
36 *
37 * @examples
38 *
39 * ### With delay
40 *
41 * <Tooltip delay={1000}>
42 *   <TooltipTrigger asChild>
43 *     <Button variant="outline">Hover with delay</Button>
44 *   </TooltipTrigger>
45 *   <TooltipContent>
46 *     <p>This tooltip appears after 1000ms</p>
47 *   </TooltipContent>
48 * </Tooltip>
49 *
50 * ### Skip delay on subsequent tooltips
51 *
52 * When a tooltip is shown, hovering over other tooltip triggers will show their tooltips immediately without delay. Try hovering over the first button, then quickly move to the others.
53 *
54 * <div class="flex gap-2">
55 *   <Tooltip delay={500}>
56 *     <TooltipTrigger asChild>
57 *       <Button variant="outline">Bold</Button>
58 *     </TooltipTrigger>
59 *     <TooltipContent>
60 *       <p>Bold (Ctrl+B)</p>
61 *     </TooltipContent>
62 *   </Tooltip>
63 *   <Tooltip delay={500}>
64 *     <TooltipTrigger asChild>
65 *       <Button variant="outline">Italic</Button>
66 *     </TooltipTrigger>
67 *     <TooltipContent>
68 *       <p>Italic (Ctrl+I)</p>
69 *     </TooltipContent>
70 *   </Tooltip>
71 *   <Tooltip delay={500}>
72 *     <TooltipTrigger asChild>
73 *       <Button variant="outline">Underline</Button>
74 *     </TooltipTrigger>
75 *     <TooltipContent>
76 *       <p>Underline (Ctrl+U)</p>
77 *     </TooltipContent>
78 *   </Tooltip>
79 * </div>
80 *
81 * ### Different sides
82 *
83 * Use the `side` prop to control which side the tooltip appears on.
84 *
85 * <div class="grid gap-4 py-8">
86 *   <div class="flex gap-4 items-center justify-center">
87 *     <Tooltip>
88 *       <TooltipTrigger asChild>
89 *         <Button variant="outline">Left</Button>
90// … truncated