Topic: mdbTooltip width not working
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
<div>
<ng-template #popTemplate style="width:400px;">
<p>This is a tooltip.</p>
</ng-template>
<div [mdbTooltip]="popTemplate" [placement]="top">
Show tooltip
</div>
</div>
I've tried adding the following CSS
.tooltip-inner { max-width: 500px !important; }
Hello,
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.
Regards,
Arek
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.
Thank you for letting us know about this problem, we will take a closer look at the position on smaller devices.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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