{"name":"tooltip","title":"Tooltip","description":"A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.","installCommand":"bunx marko-ui add tooltip -y","usageTags":"<Tooltip>","importSnippet":"import Tooltip from \"@/components/ui/tooltip/tooltip.marko\";","usageSnippet":"<Tooltip content=\"Add to library\">\n  <@trigger|props|>\n    <Button ...props variant=\"outline\">Hover me</Button>\n  </@trigger>\n</Tooltip>","tags":["Tooltip"],"parts":[{"name":"trigger","param":"Record<string, unknown>","description":"Trigger render-prop — typically the element the tooltip describes."}],"props":[{"name":"content","type":"string | Marko.Body<[], void>","required":true,"description":"Tooltip content shown when open."},{"name":"aria-label","type":"string | undefined","required":false,"description":"Custom label for the tooltip."},{"name":"closeDelay","type":"number | undefined","required":false,"default":"150","description":"The close delay of the tooltip."},{"name":"closeOnClick","type":"boolean | undefined","required":false,"default":"true","description":"Whether the tooltip should close on click"},{"name":"closeOnEscape","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the tooltip when the Escape key is pressed."},{"name":"closeOnPointerDown","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the tooltip on pointerdown."},{"name":"closeOnScroll","type":"boolean | undefined","required":false,"default":"true","description":"Whether the tooltip should close on scroll"},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"The initial open state of the tooltip when rendered.\nUse when you don't need to control the open state of the tooltip."},{"name":"defaultTriggerValue","type":"string | null | undefined","required":false,"description":"The initial trigger value when rendered.\nUse when you don't need to control the trigger value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the tooltip is disabled"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the tooltip. Useful for composition."},{"name":"interactive","type":"boolean | undefined","required":false,"default":"false","description":"Whether the tooltip's content is interactive.\nIn this mode, the tooltip will remain open when user hovers over the content."},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the tooltip"},{"name":"openDelay","type":"number | undefined","required":false,"default":"400","description":"The open delay of the tooltip."},{"name":"positioning","type":"PositioningOptions | undefined","required":false,"description":"The user provided options used to position the popover content"},{"name":"triggerValue","type":"string | null | undefined","required":false,"description":"The controlled trigger value"}],"events":[{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function called when the tooltip is opened."},{"name":"onTriggerValueChange","arg":"TriggerValueChangeDetails","description":"Function called when the trigger value changes."},{"name":"openChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":["The trigger's `aria-describedby` points at the tooltip content only while it's open, so assistive tech announces the description without adding permanent DOM noise.","The content renders `role=\"tooltip\"` unless the trigger already carries an `aria-label`, in which case the label is the accessible name and the role is omitted to avoid redundant announcements.","Opens on trigger focus as well as hover, so keyboard-only users can reach tooltip content by tabbing to the trigger — no pointer required.","Closes on `Escape` (`closeOnEscape`, default `true`) and on scroll (`closeOnScroll`, default `true`); set `closeOnPointerDown={false}` if the tooltip should survive a click on the trigger."],"examples":[{"id":"tooltip-demo","title":"Basic","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Tooltip content=\"Add to library\">\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Hover me</Button>\n  </@trigger>\n</Tooltip>","description":"The `trigger` render-prop receives the machine's trigger attributes — spread them onto whatever element the tooltip describes."},{"id":"tooltip-sides","title":"Positioning","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex gap-4\">\n  <Tooltip content=\"Top tooltip\" positioning={ placement: \"top\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Top</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" positioning={ placement: \"right\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Right</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" positioning={ placement: \"bottom\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Bottom</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" positioning={ placement: \"left\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Left</Button>\n    </@trigger>\n  </Tooltip>\n</div>","description":"Pass `positioning={ placement: \"top\" | \"right\" | \"bottom\" | \"left\" }` to control where the tooltip renders relative to its trigger."},{"id":"tooltip-delay","title":"Custom delay","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Tooltip content=\"Appears quickly\" openDelay=0 closeDelay=0>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">No delay</Button>\n  </@trigger>\n</Tooltip>","description":"Set `openDelay` and `closeDelay` (in milliseconds) to change how quickly the tooltip appears and disappears."},{"id":"tooltip-keyboard","title":"With Keyboard Shortcut","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Tooltip>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\" size=\"icon-sm\" aria-label=\"Save Changes\">\n      <Icon name=\"SaveIcon\"/>\n    </Button>\n  </@trigger>\n  Save Changes <Kbd>S</Kbd>\n</Tooltip>","description":"Compose `Kbd` inside the tooltip's body to show a keyboard shortcut alongside the tooltip text.","essential":true},{"id":"tooltip-disabled","title":"Disabled Button","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Tooltip>\n  <@trigger|props|>\n    <span ...props class=\"inline-block w-fit\">\n      <Button type=\"button\" variant=\"outline\" disabled>Disabled</Button>\n    </span>\n  </@trigger>\n  <p>This feature is currently unavailable</p>\n</Tooltip>","description":"Show a tooltip on a disabled button by wrapping it with a `span` and spreading the trigger props onto the span instead."},{"id":"tooltip-rtl","title":"RTL","source":"import Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div dir=\"rtl\" class=\"flex flex-wrap justify-center gap-2\">\n  <Tooltip content=\"إضافة إلى المكتبة\" dir=\"rtl\" positioning={ placement: \"left\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">يسار</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"إضافة إلى المكتبة\" dir=\"rtl\" positioning={ placement: \"top\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">أعلى</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"إضافة إلى المكتبة\" dir=\"rtl\" positioning={ placement: \"bottom\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">أسفل</Button>\n    </@trigger>\n  </Tooltip>\n  <Tooltip content=\"إضافة إلى المكتبة\" dir=\"rtl\" positioning={ placement: \"right\" }>\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">يمين</Button>\n    </@trigger>\n  </Tooltip>\n</div>","description":"Set `dir=\"rtl\"` on the `Tooltip` (matching the surrounding document direction) so the positioner flips placement automatically."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["button"],"nativeAttributes":"span","composition":"`Tooltip` is a single component, not three. Where upstream composes `Tooltip` / `TooltipTrigger` / `TooltipContent`, this port folds trigger and content into `Tooltip` itself: the `@trigger` render-prop receives the machine's trigger attributes to spread onto whatever element the tooltip describes, and `content` (a string prop, or the tag's own body) supplies what's shown when open. There is no separate `TooltipTrigger` or `TooltipContent` tag to import."}