Tooltip text overflow


Topic: Tooltip text overflow

m.hamacher pro premium priority asked 3 years ago

Hello there,

first of all I'm using MDB 4.6.0 but it is not possible to choose the version.

Then to the main problem. In my project I am using some tooltips. Some of them have a very long content and the problem is, that the tooltip box do not have the correct height. Only the first words are in the box.
So I tested a little bit to fix the problem and I found out that this is only a problem with md-tooltip and md-tooltip-main. md-tooltip-email works well. I have some examples for you.

md-tooltip:
Template:

template: '<div class="tooltip md-tooltip">' +
'<div class="tooltip-arrow md-arrow"></div>' +
'<div class="tooltip-inner md-inner"></div>' +
'</div>'

Result:
https://pasteboard.co/HXjEGw9.png

md-tooltip-main:
Template:

template: '<div class="tooltip md-tooltip-main">' +
'<div class="tooltip-arrow md-arrow"></div>' +
'<div class="tooltip-inner md-inner-main"></div>' +
'</div>'

Result:
https://pasteboard.co/HXjFmYq.png

md-tooltip-email:
Template:

template: '<div class="tooltip md-tooltip-email">' +
'<div class="tooltip-arrow md-arrow"></div>' +
'<div class="tooltip-inner md-inner-email"></div>' +
'</div>'

Result:
https://pasteboard.co/HXjFMAV.png

Have I missed some option for md-tooltip and md-tooltip-main or is that not possible with them? Or maybe a bug in the calculation of the height?
For now I will use md-tooltip-email, but I like the md-tooltip-main style more and would be very happy if this will work too.

 

Kind regards

 


Piotr Glejzer staff answered 3 years ago

Hi, 

thanks for the report that bug. It's a problem with max-height in tooltips.scss in a pro folder. If you will change it to 'min-height' instead 'max-height' everything will work. You have to use gulp to compile/minify SCSS files to CSS. We will make this fix globally in next release.

Best,

Piotr


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: macOs Mojave
  • Provided sample code: Yes
  • Provided link: Yes