Tool tip is showing behind the modal

Hello there @Priya,

Would you be able to provide a screen recording in which you show your view with the modal closed, then open it and show the tool tip?

Hi @Matias.Monday ,

Please refer the below link for the demo video for your more reference.

https://drive.google.com/drive/folders/1GxKvDpgYAvPIh7DrSolIlpQZly0V8QIr?usp=share_link

Thank you very much @Priya !!

I will take this with the team in charge of the design system and let you know when they reply 🙂

Cheers,
Matias

Hello again @Priya,

Our team will take a look into it.

For a quick fix, the tooltip can receive a zIndex property (please check out this documentation about how to use it) and the current modal zIndex is --monday-modal-z-index: 10000; so if you give this element a className and in your CSS file, you use that className and apply z-index: 10001; this should put it on top of the modal!

Hello again @Priya,

Our team in charge of the design system would like to get in contact with you via email.

Would that be OK?

Would it be OK for us to use the email address that you used to create your community user?

Hi @Matias.Monday,

The above given styles does not work for me.

Please refer the below screenshot and help me.

Hello again @Priya,

Our team in charge of the design system would like to get in contact with you via email. You can take this with them directly.

Would that be OK?

Would it be OK for us to use the email address that you used to create your community user?

Hi @Matias.Monday,

Apologies for the delay in my response! I got stuck up in another issue.

Sure, Please make sure the email contact with the design team. That works for me.

Thanks in Advance!
Priya

Sounds good @Priya!

I will let them know 🙂

Hi @Matias.Monday,

What is the resolution here. I have the same problem.

Best

When I am using tables or modal the tooltip gets behind. Can I increase the z-index of tooltip globally?

My workaround for the “close” button tooltip in Modal components has been to just set the closeButtonAriaLabel attribute to empty in its ModalHeader, because it still doesn’t seem to be fixed yet, and it’s not a big deal UX wise:

<Modal>
<ModalHeader closeButtonAriaLabel="" />
</Modal>

For anything else, I started using the wrapping Tooltip component which has an explicit zIndex attribute, just like below with a Button child:

<Tooltip zIndex="2000">
<Button>Label</Button>
</Tooltip>

It’s maybe not ideal, but has worked for me in the past.

– Markus

Another answer would be to call the standard modal:

monday.execute(“openAppFeatureModal”, { urlPath, urlParams, height, width }).then((res) => {
console.log(res.data);
{“close”: true}
// The above is a callback to see if a user closed the modal from the inside. This is useful should you want to run some logic within the app window.
});

This has the added bonus of opening in the center of the browser and adding a blanket over the entire viewport rather than just a smaller part of the UI.

You might then however need to use something like postMessage to communicate between iframes though.

Hi @MASO and @dvdsmpsn,

Thanks for your replies. For modal display it is ok. There are some workarounds. But what if I want to use tables? I use the <Table/> component, due to the fact that the z-index of <TableHeader/> component is greater than tooltip’s z-index the tooltip gets behind of table headers. For table rows, it is ok.

Do you know any workaround for this issue?

Best

I haven’t worked explicitly with the <Table /> component yet, so I sadly can’t give you any advice on this.

– Markus

Thank you @MASO

Hello there @apsimos,

If you still need help with this, would you be able to please fill this form (https://support.monday.com/hc/en-us/requests/new?ticket_form_id=13855862562962) adding as much information as possible to it (such as account ID, board IDs, item IDs, timestamps, etc.) so that our team can take a look into it?

Looking forward to hearing from you 😀

Cheers,
Matias

Hi @Matias.Monday

I created the issue.

Best

Thank you @apsimos!

We will speak there!

Hi,

I had escalated this issue and a support member from monday gave me a solution which worked for me. Just put this css in your css file and it should work.

.monday-style-dialog-content-wrapper {
    z-index: 10000;
}

@MASO you can try this if you still have the problem. Just fyi.

Thank you @apsimos for sharing it!