'Floating Menu on Tooltips (z-index problem)

I'm trying to have a floating menu on top of some text with tooltips but running into a z-index problem. I tried all different combinations of z-index values and placements with no success. I'm sure that I'm missing something obvious. Can someone help?

CODE: https://tuw.fqd.mybluehost.me/sites/test.html

FLOATING HAMBURGER MENU SOURCE: https://codepen.io/Cubbe/pen/RKEBby

TOOLTIP SOURCE: https://www.w3schools.com/css/css_tooltip.asp

z-index: 1;
cssmenutooltipz-indexfloating


Solution 1:[1]

Add z-index: 1; on #menu style and move <div class="bg-cover reveal"></div> at last position of divs. Here

Solution 2:[2]

you can put "z-index : -1;" in the ".tooltip" in your css code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amandeep Singh
Solution 2 eeeltie

Related Questions