itwinui-react Tooltip does not appear inside Dialog in Widget

[cfranklyn]

Describe the bug iTwinUi-React Tooltips do not work inside a Dialog in an appui context.

To Reproduce Steps to reproduce the behavior:

(I tried these steps using the Electron "standalone" test app. I can provide the changes that I made if needed)

1. Create a widget that includes an iTwinUI-React Dialog.
2. Add a Tooltip to a component (I just used a div component) in the Dialog
3. Hover over the component
4. The tooltip does not appear

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the applicable information):

• OS: Windows
• Browser Tested in Chrome as well as Electron "Standalone" test app
• Version [e.g. 22]
• iTwin.js AppUI Version: Tested in test app as mentioned above
• iTwin.js Version [e.g. 3.6.2]

Additional context Note:

• Tooltips do appear when you add them to a widget outside of a dialog (see screenshot)
• Tooltips work inside of a Dialog when not in an appui context (see this example for the effect that I am trying to achieve)
• If I pop out the frontstage, the Tooltip seems to appear in the dialog.

My widget src:

import * as React from "react";
import { Button, Dialog, Tooltip } from "@itwin/itwinui-react";
import { useState } from "react";

export const MyWidgetContent = () => {
  const [showDialog, setShowDialog] = useState(false);
  const openDialog = () => {
    setShowDialog(true);
  };

  return (
    <>
      <Dialog
        isOpen={showDialog}
        onClose={() => setShowDialog(false)}
        isDraggable
        isResizable
        closeOnEsc
        closeOnExternalClick
        preventDocumentScroll
        trapFocus
        setFocus
      >
        <Dialog.Main>
          <Dialog.TitleBar titleText={"Some Dialog"} />
          <Dialog.Content>
            {/* ********************** Non-working tooltip ********************** */}
            <Tooltip content={"This Tooltip *doesn't* appear"} placement="bottom">
              <div>Dialog Content</div>
            </Tooltip>
          </Dialog.Content>
        </Dialog.Main>
      </Dialog>
      <div>
        <Tooltip content="This Tooltip works" placement="bottom">
          <Button onClick={openDialog}>Dialog</Button>
        </Tooltip>
      </div>
    </>
  );
};

[raplemie]

@cfranklyn After looking a bit, the widgets uses 2 classes that prevent displaying the overflow, if you look at the html tree in the widget, you'll see nz-widget-widget have overflow: hidden and nz-widget-contentRenderer also have overflow:hidden;. Disabling those 2 will indeed make the tooltip appear, however, I dont suggest removing those for now. I'll see with the team what we can do so this would work.

[raplemie]

Hi @cfranklyn, sorry for the delay on this. Using iTwinUI dialog directly within a widget will likely always be a problem due to the way we render the widgets. (IE, if you widget was floating, the Dialog would then be caught within the widget, the tooltip would work fine, but that is unlikely to be the desired outcome.

The best solution would be to use the Dialog or ModelessDialog classes from Core-React package so the Dialog z-index would be properly set above the widgets, and display them by using the UiFramework.dialogs entry point so they are not rendered within the widget body and restricted by various visibility issue.

(Note that rendering directly an iTwinUI dialog in UiFramework.dialogs.modeless.open will open the dialog, but it will not have the correct z-index and will display underneath the floating widgets.)

Since 4.3.0, the underlying component that Dialog uses is the iTwinUI dialog, so you should have a really similar visual result than with directly using iTwinUI dialogs.

Let me know if this fixes your issue, sorry again for the delay.

[cfranklyn]

Hi @raplemie. I've been playing around with this and it seems to work well. I can see the tooltips in docked and un-docked mode. Thanks very much for looking into it.