| 9 | } |
| 10 | |
| 11 | export function Tooltip(props: TooltipProps) { |
| 12 | const [open, setOpen] = createSignal(false) |
| 13 | const [local, others] = splitProps(props, ["children", "class", "inactive"]) |
| 14 | |
| 15 | const c = children(() => local.children) |
| 16 | |
| 17 | onMount(() => { |
| 18 | const childElements = c() |
| 19 | if (childElements instanceof HTMLElement) { |
| 20 | childElements.addEventListener("focus", () => setOpen(true)) |
| 21 | childElements.addEventListener("blur", () => setOpen(false)) |
| 22 | } else if (Array.isArray(childElements)) { |
| 23 | for (const child of childElements) { |
| 24 | if (child instanceof HTMLElement) { |
| 25 | child.addEventListener("focus", () => setOpen(true)) |
| 26 | child.addEventListener("blur", () => setOpen(false)) |
| 27 | } |
| 28 | } |
| 29 | } |
| 30 | }) |
| 31 | |
| 32 | return ( |
| 33 | <Switch> |
| 34 | <Match when={local.inactive}>{local.children}</Match> |
| 35 | <Match when={true}> |
| 36 | <KobalteTooltip forceMount gutter={4} {...others} open={open()} onOpenChange={setOpen}> |
| 37 | <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}> |
| 38 | {c()} |
| 39 | </KobalteTooltip.Trigger> |
| 40 | <KobalteTooltip.Portal> |
| 41 | <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}> |
| 42 | {others.value} |
| 43 | {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */} |
| 44 | </KobalteTooltip.Content> |
| 45 | </KobalteTooltip.Portal> |
| 46 | </KobalteTooltip> |
| 47 | </Match> |
| 48 | </Switch> |
| 49 | ) |
| 50 | } |