Topic: Tooltips under divs
bissounet free asked 3 years ago
Expected behavior*That the tooltips are displayed above all the divs*Actual behavior*Tooltips are displayed below all divs*Resources (screenshots, code snippets etc.)
Since I migrated my main html page from the divi code module to a template_page.php file, the mdb "tooltips" are hidden by all the divs. I tried to change the z-index of the hover button but it doesn't work. Known issue ?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: PC
- Browser: Firefox
- OS: W10
- Provided sample code: No
- Provided link: No
Marcin Luczak staff commented 3 years ago
Hi,
This issue is not known to us, as it might be related to the code inside your function.php file or its dependencies/imports. Would you be able to create a working example of your code e.g. via MDB GO https://mdbootstrap.com/docs/standard/cli/ , create a snippet with your code, or paste your code here?
Keeep coding, Marcin
bissounet free commented 3 years ago
OK I solved one issue with some js files declaration errors.
Everything works fine BUT the z-index positionning issue with the tooltips and popovers still remains !..
(To illustrate I can't add an image with the "ADD COMMENT" function, so I put it in the next message with "POST" function)).image :example tooltip under divs and scrollbar
I tried with js : $('#button').tooltip({ boundary: 'body' }),
I tried with css : .tooltip{z-index:1000000!important!},
I tried with html with : data-container="body",
and many combinaisons with container position and overflow attributes, but nothing works.
So, can't you simply show us a method to make sure all popover and tooltips are always on top of all elements ??
Marcin Luczak staff commented 3 years ago
There is no method to check if a tooltip or popover is on top. They're by default rendered with
position: absolute
andz-index:1070
, so if setting z-index to higher values doesn't work it means that it's not a z-index issue. You can check in developer tools what styles are appended to a rendered tooltip., but without knowing what your code looks like or having your site published e.g. on MDB GO it will be hard to tell what might be causing your problems.bissounet free commented 3 years ago
OK thank you Marcin.
After a lot of testing, finally it really was a z-index issue. I don't know why yet, but migrating the html page from DIVI code module to simple page.php wp template) changed some divs z-index...
So, problem solved ;-)
Marcin Luczak staff commented 3 years ago
I'm glad that it works now :)
Keep coding, Marcin