Topic: Tooltip currently not displaying correctly, possibly apart of an existing issue?
Expected behavior
Tooltip appears around the text. ('a' tag)
Actual behavior
Tooltip doesn't appear until I scroll the link to the near top. I see there is a ticket for something like this, I am unsure if this is part of the same issue. Currently on Version MDB5-Standard-UI-KIT-Pro-Essential-3.3.0.
Resources (screenshots, code snippets etc.)
<a href="#" container:="" 'body'="" data-mdb-toggle="tooltip" title="" data-mdb-original-title="Your powerlevel is your base attack, defense, and health combined. Shows how strong you are without the use of equipment.">188</a>
Please see this animated image for further representation of my issue: https://gyazo.com/e838bbdfc0f0ca712e2e6c812429dce7
Other UI elements work fine, such as drop downs, nav items, hover animation events, etc.
From some research, I found that adding this line of code may help, however, it doesn't make a difference:
$(function () {
$('[data-mdb-toggle="tooltip"]').tooltip()
})
Not sure if that does anything, didn't seem to.
On hover, the variable "Aria-describeby" pops up.
And the following DIV is created:
I've also tried with and without the "container: body" line. Doesn't make a difference.
-No errors in the console.
If you have any further questions or believe this issue is resolved in a future version please let me know.
Thank you, Brandon
It seems to be issue related to bootstrap. They have fixed it in new beta. In our new release we will use this beta and this should fix your problem.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: All
- Browser: Chrome, Edge
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 3 years ago
Hi. Could you please create a snippet with this issue, so we can take a closer look at this case?
brandon cox priority commented 3 years ago
I made a snippet, it seems to "mostly" work in the snippet, so that's odd. I reloaded the entire source file into my site and that didn't seem to help. Sometimes when I hover over the link in the snippet, the tooltip goes away and doesn't come back... or it gets stuck. I upgraded to 3.4 and still the same issue. If I change the position to relative instead of absolute in the tooltip, the tooltip seems to go on top of the text (instead of above, next to, etc). Not sure if I need to dig deeper into my own site's code. I am importing http://code.jquery.com/jquery-latest.min.js into the site, would this cause this issue maybe?