Quick Tip - Multiline md-tooltip

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!

Tags: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

PHP code

  • You may post PHP code. You should include <?php ?> tags.