Closed leo-petrucci closed 2 weeks ago
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.
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."
@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
}
}
}
}
}
});
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 hasz-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
Additional Information
Is there any workaround to this that doesn't involve targeting all the Tooltips?