diff --git a/docs/styleguide/scripts/tooltip-overlays.js b/docs/styleguide/scripts/tooltip-overlays.js index 2de1bc4..1c75a7c 100644 --- a/docs/styleguide/scripts/tooltip-overlays.js +++ b/docs/styleguide/scripts/tooltip-overlays.js @@ -1,6 +1,7 @@ (function initTooltipOverlayModule() { let tooltipId = 0; const states = new WeakMap(); + const tooltipStates = new Set(); const getViewport = () => ({ width: window.visualViewport?.width || window.innerWidth, @@ -156,6 +157,11 @@ }; const openTooltip = (state) => { + tooltipStates.forEach((otherState) => { + if (otherState !== state) { + closeTooltip(otherState); + } + }); movePanelToPortal(state); setOpenState(state, true); positionTooltip(state); @@ -219,10 +225,14 @@ wrap.dataset.tooltipInit = 'true'; wrap.dataset.tooltipPlacement = 'bottom'; states.set(wrap, state); + tooltipStates.add(state); ensureAccessibility(state); setOpenState(state, false); - wrap.addEventListener('pointerenter', () => { + wrap.addEventListener('pointerenter', (event) => { + if (event.pointerType !== 'mouse') { + return; + } if (state.dismissed) { return; } @@ -231,6 +241,9 @@ }); wrap.addEventListener('pointerleave', (event) => { + if (event.pointerType !== 'mouse') { + return; + } state.hoverTrigger = false; state.dismissed = false; if (!state.panel.contains(event.relatedTarget)) { @@ -238,14 +251,20 @@ } }); - state.panel.addEventListener('pointerenter', () => { + state.panel.addEventListener('pointerenter', (event) => { + if (event.pointerType !== 'mouse') { + return; + } if (!state.dismissed) { state.hoverPanel = true; openTooltip(state); } }); - state.panel.addEventListener('pointerleave', () => { + state.panel.addEventListener('pointerleave', (event) => { + if (event.pointerType !== 'mouse') { + return; + } state.hoverPanel = false; state.dismissed = false; closeIfInactive(state); @@ -268,7 +287,6 @@ }); state.trigger.addEventListener('click', (event) => { - event.stopPropagation(); togglePinned(state); }); @@ -314,14 +332,17 @@ }); observer.observe(document.body, { childList: true, subtree: true }); - document.addEventListener('click', (event) => { - document.querySelectorAll('.sg-tooltip-wrap').forEach((wrap) => { - const state = states.get(wrap); - if (state && !wrap.contains(event.target) && !state.panel.contains(event.target)) { + const closeFromOutside = (event) => { + tooltipStates.forEach((state) => { + if (!state.wrap.contains(event.target) && !state.panel.contains(event.target)) { closeTooltip(state); } }); - }); + }; + + document.addEventListener('pointerdown', closeFromOutside, true); + document.addEventListener('touchstart', closeFromOutside, true); + document.addEventListener('click', closeFromOutside, true); const repositionOpenTooltips = () => { document.querySelectorAll('.sg-tooltip-wrap[data-tooltip-open="true"]').forEach((wrap) => { diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 2989ac9..2b1852e 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "060eb86", - "syncedAtUtc": "2026-09-21T14:06:04Z", + "styleguideCommit": "3e9ba6c", + "syncedAtUtc": "2026-09-21T14:24:42Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" }