Estoy tratando de crear una funcionalidad de guía para mi aplicación. Como parte de esta funcionalidad, se espera que se muestre una información sobre herramientas junto al elemento HTML de destino y que este elemento de destino se coloque encima del fondo modal que aparece junto con la información sobre herramientas.

El problema es que después de un esfuerzo significativo, todavía no puedo hacer que el elemento HTML se muestre sobre el fondo modal. Trucos simples como z-index: 10000 !important; position: relative no ayuda. También cambiar z-index los elementos principales al deshabilitarlo en las herramientas de desarrollo de Firefox (y dejar z-index: 10000 !important; position: relative para el elemento de destino que se supone que está encima del fondo modal) no ayuda.

El HTML de la aplicación es bastante complejo con muchos elementos. Pero quiero poder "resaltar" cualquier elemento dado colocándolo encima de la superposición modal conociendo solo su id. ¿Hay una manera fácil de hacerlo con JavaScript/React?

Con suerte, hay una manera de hacer esto sin modificar el DOM, lo cual sería muy preferible.

UPD: Demostración de código : presione el botón del sombrero para mostrar la guía/información sobre herramientas