Topic: Tooltip currently not displaying correctly, possibly apart of an existing issue?

brandon cox priority asked 3 years ago


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. enter image description here And the following DIV is created: enter image description here 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


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?


Dawid Wajszczuk staff answered 3 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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