There's was issue opened in angular that wasn't resolve, about how the md-tooltip does not support multiple lines of text. Since there's not a straight forward solution you can use CSS to solve this issue.
The most important css to add would be:
.md-content._md.md-show { height: auto !important; }
By default, the height in the tooltip is fixed and that's is why a text with multilines won't be show correctly. Qouting the issue:
"The specs hint that a tooltip is a single line of text. As I didn't receive any more feedback on this, I'm now closing this issue as working according to spec."
Next, there are a couple of CSS lines that would help you look nicer:
/* Apply this to the inner tooltip component */ .tooltip-inner { word-break: break-all; width: 500px; text-align: center; } /* Apply this to the text inside the tooltip */ .span-white-space { white-space: normal; }
Hope this help you to give your customesr a better user experience!
Comments
Congrats!
Submitted by Alejandro on
Congrats!
It works but i have added only
.md-content{
height: auto !important;
}
Thanks!
Add new comment