Topic: mdbTooltip width not working

jimsgroup pro asked 4 years ago

I've created a tooltip and I'm trying to change the width. No matter what I do, it remains at 200px wide. My code looks like this

<ng-template #popTemplate style="width:400px;">
<p>This is a tooltip.</p>
<div [mdbTooltip]="popTemplate" [placement]="top">
Show tooltip

I've tried adding the following CSS
.tooltip-inner { max-width: 500px !important; }
When I inspect the web page, the above CSS doesn't even appear on the tooltop-inner div.
Any suggestions?

Arkadiusz Idzikowski staff answered 4 years ago

Thank you for letting us know about this problem, we will take a closer look at the position on smaller devices. 

jimsgroup pro answered 4 years ago

I've just tried adding it to styles.scss and that works now. However. There is still an issue with mobile devices. If I put the position as top and the element that the tooltip is on, is on the left of the screen, the tooltip is displayed half on and half off the screen. I think you need to improve the calculation of placement of the tooltip and the arrow.

Arkadiusz Idzikowski staff answered 4 years ago


Did you add this rule to the styles.scss file? Please set 'width' property on .tooltip-inner as well or add more text and the tooltip size should change.



Please insert min. 20 characters.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: windows
  • Browser: Chrome
  • OS: windows 10
  • Provided sample code: Yes
  • Provided link: No