将元素置于模态背景之上

Question

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.

The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000;important: position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000;important: position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.

HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?

Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.

UPD: Code demo - press hat button to show guide/tooltips

Answer 1

Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.

I did this by adding

d.classList.add("tooltip-active-element");

to App.js@77

Also added the class to the css file:

.tooltip-active-element {
  position: relative;
  z-index: 2;
  background: red;
}

and removed the z-index value from other classes, the key one being the .form-wrapper class.

Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt