import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip" import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js" import type { ComponentProps } from "solid-js" import { createStore } from "solid-js/store" import "./tooltip-v2.css" export interface TooltipV2Props extends ComponentProps { value: JSX.Element class?: string contentClass?: string contentStyle?: JSX.CSSProperties inactive?: boolean forceOpen?: boolean } export function TooltipV2(props: TooltipV2Props) { let ref: HTMLDivElement | undefined const [state, setState] = createStore({ open: false, block: false, expand: false, }) const [local, others] = splitProps(props, [ "children", "class", "contentClass", "contentStyle", "inactive", "forceOpen", "ignoreSafeArea", "value", ]) const close = () => setState("open", false) const inside = () => { const active = document.activeElement if (!ref || !active) return false return ref.contains(active) } const drop = (expand = state.expand) => { if (expand) return if (ref?.matches(":hover")) return if (inside()) return setState("block", false) } const sync = () => { const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]') setState("expand", expand) if (expand) { setState("block", true) close() return } drop(expand) } const arm = () => { setState("block", true) close() } const leave = () => { if (!inside()) close() drop() } createEffect(() => { if (!ref) return sync() const obs = new MutationObserver(sync) obs.observe(ref, { subtree: true, childList: true, attributes: true, attributeFilter: ["aria-expanded", "data-expanded"], }) onCleanup(() => obs.disconnect()) }) let justClickedTrigger = false return ( {local.children} { if (local.forceOpen) return if (state.block && open) return if (justClickedTrigger) { justClickedTrigger = false return } setState("open", open) }} > { if (event.key !== "Enter" && event.key !== " ") return arm() }} onPointerLeave={leave} onFocusOut={() => requestAnimationFrame(() => drop())} > {local.children} { const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme") if (theme) el.setAttribute("data-theme", theme) }} data-component="tooltip-v2" data-placement={props.placement} data-force-open={local.forceOpen} class={local.contentClass} style={local.contentStyle} onPointerDownOutside={(e) => { if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) { justClickedTrigger = true } e.preventDefault() }} > {local.value} ) }