Unable to display tooltip when toggle fullscreen

[LeleDallas]

Current versus expected behaviour

Hello👋!

In joint plus I create a fullscreen toggler button. In fullscreen mode I notice that all Tooltips are under the canvas even if I set a higher z-index.

How can I solve it?

Steps to reproduce

1. Create some element with tooltip
2. Create a fullscreen toggler button that call on click the function util.toggleFullScreen()
3. Click the Button
4. Tooltip are not show on hover elements

Version

^4.0.4+

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Windows

[kumilingus]

Which element have you set to full screen? You may need to set the Tooltip container option to the element that is the element (or its descendants) that was displayed full screen.

[LeleDallas]

Right now I'm expanding the ref element:

<div ref={ref}>
   {defaultMapControls(logicMap, ref)}
   {<div className="canvas map-container" ref={canvas} style={{ marginTop: '1rem', height: '68vh', overflow: 'auto' }} />}
</div>

Inside defaultMapControls I have the toggle button.

Tooltips are set correctly and visible in default view, as you can see here in these screenshot

In fullscreen from inspector I have this view:

I think the #top-layer is above all other elements...

[kumilingus]

Sorry, did you use the container option or not? You can set the container to be the ref element.

[LeleDallas]

What do you mean? My container is the parent div with the ref property

[kumilingus]

You may need to set the Tooltip container option to the element that is the element (or its descendants) that was displayed full screen.

When creating a tooltip, you need to pass the container option to tell the tooltip to append to the ref element instead of the body.

new ui.Tooltip({
   /* .. */
   container: canvas.nativeElement // your container ref element
})

[LeleDallas]

You may need to set the Tooltip container option to the element that is the element (or its descendants) that was displayed full screen.

When creating a tooltip, you need to pass the container option to tell the tooltip to append to the ref element instead of the body.

new ui.Tooltip({
   /* .. */
   container: canvas.nativeElement // your container ref element
})

Yeah I did this for my icons components and as you can see it works but when I'm in fullscreen mode as I said all tooltip are under the fullscreen element

[kumilingus]

Could you please share the code on how you instantiated the tooltip?

What is an icon component?

All I see, is that your tooltip is appended to the body and not to the ref container.

[LeleDallas]

const tooltipDefaultOptions = { 
target: '[data-tooltip]', 
position: ui.Tooltip.TooltipPosition.Left,
direction: ui.Tooltip.TooltipArrowPosition.Auto,
padding: 12,
theme: 'material' 
};

const tooltipGenerator: ui.Tooltip[] = [];

const createTooltipGenerator = useCallback(
  () => new ui.Tooltip(tooltipDefaultOptions),
  []
);

paper
  .on(
    "blank:mouseover",
    () =>
      tooltipGenerator.length == 0 &&
      tooltipGenerator.push(createTooltipGenerator())
  )
  .on("cell:mouseover", (cellView) => {
    if (tooltipGenerator.length == 0) {
      tooltipGenerator.push(createTooltipGenerator());
    }
    if (cellView.model instanceof shapes.standard.Link) {
      const cellTooltip =
        document.querySelector(".joint-tooltip.joint-theme-material") ??
        undefined;
      if (cellTooltip) {
        const cellTooltipStyle = cellTooltip.getAttribute("style") ?? undefined;
        const leftProperty = _.find(cellTooltipStyle?.split(";"), (prop) =>
          prop.trim().startsWith("left:")
        )?.trim();

        const leftValue = _.first(leftProperty?.match(/\d+\.*\d*/g));

        if (cellTooltipStyle && leftProperty && leftValue) {
          const newTooltipPosition = cellTooltipStyle.replace(
            leftProperty,
            `left: ${Number(
              Number(leftValue) -
                Math.abs(cellView.sourcePoint.x - cellView.targetPoint.x) / 2
            ).toFixed(3)}px`
          );
          cellTooltip.setAttribute("style", newTooltipPosition);
        }
      }
    }
  });

[kumilingus]

What is tooltipDefaultOptions?

[LeleDallas]

What is tooltipDefaultOptions?

Look above, it's in the file now

[kumilingus]

You need to add the container option here.

const tooltipDefaultOptions = { 
  target: '[data-tooltip]', 
  position: ui.Tooltip.TooltipPosition.Left,
  direction: ui.Tooltip.TooltipArrowPosition.Auto,
  padding: 12,
  theme: 'material' ,
  container: ref.current
};

[LeleDallas]

You need to add the container option here.

const tooltipDefaultOptions = { 
  target: '[data-tooltip]', 
  position: ui.Tooltip.TooltipPosition.Left,
  direction: ui.Tooltip.TooltipArrowPosition.Auto,
  padding: 12,
  theme: 'material' ,
  container: ref.current
};

Fix it!🎉🎉🎉 Thank you very much for your help! I appreciate it!