Spaces:
Running on Zero
Running on Zero
| const anchor = element.querySelector(".help-anchor"); | |
| const tooltip = element.querySelector(".help-tooltip"); | |
| if (anchor && tooltip && typeof tooltip.showPopover === "function") { | |
| // The browser top layer avoids clipping, while the component's shadow root | |
| // preserves its scoped styles. A native title is the fallback in older browsers. | |
| anchor.removeAttribute("title"); | |
| let viewportEvents = null; | |
| const hide = () => { | |
| if (tooltip.matches(":popover-open")) tooltip.hidePopover(); | |
| viewportEvents?.abort(); | |
| viewportEvents = null; | |
| }; | |
| const show = () => { | |
| if (!tooltip.isConnected || !anchor.isConnected) return; | |
| if (!tooltip.matches(":popover-open")) tooltip.showPopover(); | |
| const rect = anchor.getBoundingClientRect(); | |
| const bounds = tooltip.getBoundingClientRect(); | |
| const margin = 16; | |
| let top = rect.top - bounds.height - 10; | |
| if (top < margin) top = rect.bottom + 10; | |
| tooltip.style.left = `${Math.max(margin, Math.min(rect.left - 24, innerWidth - bounds.width - margin))}px`; | |
| tooltip.style.top = `${Math.max(margin, Math.min(top, innerHeight - bounds.height - margin))}px`; | |
| if (!viewportEvents) { | |
| viewportEvents = new AbortController(); | |
| const options = {capture: true, signal: viewportEvents.signal}; | |
| window.addEventListener("scroll", hide, options); | |
| window.addEventListener("resize", hide, options); | |
| } | |
| }; | |
| anchor.addEventListener("mouseenter", show); | |
| anchor.addEventListener("mouseleave", () => { | |
| if (!anchor.matches(":focus-visible")) hide(); | |
| }); | |
| anchor.addEventListener("focus", show); | |
| anchor.addEventListener("blur", hide); | |
| anchor.addEventListener("keydown", (event) => { | |
| if (event.key === "Escape") hide(); | |
| }); | |
| } | |