Tooltip component has a hardcoded z-index value

[leo-petrucci]

Description

I've been trying to improve the functionality of the Transfer Directory. The last piece of the puzzle was to add some tooltips to expose some more information, however when I tried adding a Tooltip the component got rendered behind the Transfer Directory Modal.

Unfortunately, because the Twilio-WorkerDirectory-Popup component has z-index:100 it means these tooltips are rendered behind it.

Link to Reproduction

https://codesandbox.io/p/sandbox/stoic-hooks-vp6xlc

Steps to reproduce

N/A

Paste Core Version

15.3.1

Browser

Google Chrome 127

Operating System

• [X] macOS
• [X] Windows
• [X] Linux

Additional Information

Is there any workaround to this that doesn't involve targeting all the Tooltips?

[leo-petrucci]

My current workaround is as such:

import { Global, css } from "@emotion/react";
import { useState } from "react";

export const ButtonWithTooltip = () => {
  const [tooltipId, setTooltipId] = useState<string | null>(null);
  return (
    <>
      <Global
        styles={css`
          #${tooltipId} {
            z-index: 101;
          }
        `}
      />
      <Tooltip
        text={`Tooltip text`}
        ref={(ref) => {
          if (ref) {
            const describedByValue = ref.getAttribute("aria-describedby");
            setTooltipId(describedByValue);
          }
        }}
      >
        <Button variant="reset">Hover me</Button>
      </Tooltip>
    </>
  );
};

It's hacky but it works.

[nkrantz]

Hey @leo-petrucci - I'm getting a workaround for you to use until we solve this zIndex issue between Paste and Flex components. Thanks for your patience!

In the future, if you need support with the Flex UI specifically, you reach out by navigating to console.twilio.com, clicking on "Docs and Support" and selecting "Help Center."

[nkrantz]

@leo-petrucci here's a workaround provided by the Flex team for adjusting the zIndex of the Transfer Directory Modal. Let us know if that helps!

manager.updateConfig({
  theme: {
    componentThemeOverrides: {
      AgentDesktopView: {
        Panel1: {
          ".Twilio-WorkerDirectory-Popup": {
            zIndex: 5
          }
        }
      }
    }
  }
});