4

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

altern
  • 5,829
  • 5
  • 44
  • 72
  • I'm kind of in the same boat. Currently reading this stack post https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div – Mainly Karma Nov 18 '21 at 22:10
  • Do you want to implement such a thing? https://introjs.com/ – Ali Yaghoubi Nov 18 '21 at 22:10
  • This is usually quite easy @altern but first could you share what you've already got please? – sanepete Nov 18 '21 at 22:27
  • @AliYaghoubi: introjs looks really good, but I tried and it does not work for me - it is not possible to access HTML elements that are being highlighted. For example, I have a button that I want users to click and field to fill in, but they appear to be inaccessible – altern Nov 19 '21 at 03:55
  • @altern Also you can use `Sweetalert`: https://sweetalert2.github.io/#input-types – Ali Yaghoubi Nov 19 '21 at 05:06
  • @AliYaghoubi: do not quite understand how `Sweetalert` (input-types) is relevant... – altern Nov 19 '21 at 12:46
  • @sanepete: added link to codesandbox – altern Nov 19 '21 at 12:47

1 Answers1

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

enter image description here

PatricNox
  • 3,306
  • 1
  • 17
  • 25
  • I set a background color just to verify the correct element of tooltip, not needed for end results of course. – PatricNox Nov 19 '21 at 13:12
  • It does not work for the first step (#projectName input) for some reason. And I tried to recreate the desired behavior in my sandbox by applying all your recommendations - it does not work. Maybe you forgot to mention something else you did? – altern Nov 20 '21 at 07:28
  • @altern compare my sandbos css file with yours, the issue just as mentioned is the z-index usage on elements. Also, first step isn't working because the class isn't set properly on that, i just experimented with the next-step on tooltip functionality to bring fourth a working **example** – PatricNox Nov 20 '21 at 23:26