Fix hotspot tooltips in fullscreen viewer

Ensure floating ui portal is placed before fullscreen viewer but still behind navigation bar outside of fullscreen viewer. REDMINE-20673
codevise · Aug 8, 2024 · bc6fdb5 · bc6fdb5
1 parent 19abfca
commit bc6fdb5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js b/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js
@@ -62,14 +62,15 @@ export function Hotspots({contentElementId, contentElementWidth, customMargin, c
           contentElementWidth={contentElementWidth}
           configuration={configuration}
           displayFullscreenToggle={false}
-          keepTooltipsInViewport={true} />
+          keepTooltipsInViewport={true}
+          tooltipsAboveNavigationWidgets={true} />
       } />
   );
 }
 
 export function HotspotsImage({
   contentElementId, contentElementWidth, customMargin, configuration,
-  keepTooltipsInViewport, floatingStrategy,
+  keepTooltipsInViewport, floatingStrategy, tooltipsAboveNavigationWidgets,
   displayFullscreenToggle, onFullscreenEnter,
   children = children => children
 }) {
@@ -219,6 +220,7 @@ export function HotspotsImage({
                         (!panZoomEnabled && activeIndex < 0 && hoveredIndex === index)}
                active={activeIndex === index}
                keepInViewport={keepTooltipsInViewport}
+               aboveNavigationWidgets={tooltipsAboveNavigationWidgets}
                wrapperRef={contentRectRef}
                floatingStrategy={floatingStrategy}
                onMouseEnter={() => setHoveredIndex(index)}

diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js b/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js
@@ -43,6 +43,7 @@ export function Tooltip({
   area,
   contentElementId, portraitMode, configuration, visible, active,
   panZoomEnabled, imageFile, containerRect, keepInViewport, floatingStrategy,
+  aboveNavigationWidgets,
   wrapperRef,
   onMouseEnter, onMouseLeave, onClick, onDismiss,
 }) {
@@ -161,7 +162,7 @@ export function Tooltip({
              {...getReferenceProps()} />
       </CompositeItem>
       {isMounted &&
-       <TooltipPortal>
+       <TooltipPortal id={aboveNavigationWidgets && 'floating-ui-above-navigation-widgets'}>
          <FloatingFocusManager context={context} modal={false} initialFocus={-1} returnFocus={false}>
            <div style={transitionStyles}>
              <div ref={refs.setFloating}

diff --git a/entry_types/scrolled/package/src/frontend/global.module.css b/entry_types/scrolled/package/src/frontend/global.module.css
@@ -24,3 +24,8 @@
   position: relative;
   z-index: 1000;
 }
+
+:global #floating-ui-above-navigation-widgets {
+  position: relative;
+  z-index: 20000;
+}