Components: tool tip not support on multiline

[ChenReuven]

Bug, feature request, or proposal:

tool tip is not support on regular multiline

What is the expected behavior?

if we use the n or the es6 string template literal(backtick ``), the break line will work

What is the current behavior?

tool tip string is not break line

What are the steps to reproduce?

put long string with /n or with back tick and see the tooltip that the words dont break lines

What is the use-case or motivation for changing an existing behavior?

Supporting multi line is very common and important

Which versions of Angular, Material, OS, browsers are affected?

2.0.0-beta.2, Latest Chrome, Windows 10

Is there anything else we should know?

One Solution for that is refactor the .mat-tooltip class, and add one more property:
.mat-tooltip {
white-space: pre-line;
}

[ChenReuven]

@kara Can i push the fix?

[chrishandorf]

This would be very helpful as n, br , and CDATA options don't seem to work.

[ChenReuven]

yep, but i still dont get any response for that

[ghost]

I'd really like to see that feature, too!

[arlowhite]

white-space: pre; was what I wanted, but I don't see how to set CSS only on certain tooltips because the tooltip element is not a child of your component.

Also, mdTooltip creates a leading and trailing space in the HTML (not stripped if not collapsing white-space), which would be nice to get rid of.

I think a better solution would be the addition of mdTooltipClass. Then developers could have complete CSS control over their tooltips and solve this multiline issue with the white-space policy they prefer.

[arlowhite]

If mdTooltipClass is added (#4601) I think the documentation should be updated to suggest white-space: pre-line; as the solution for multiline because some developers may not know about it.

[arlowhite]

Just FYI, https://github.com/angular/material2/pull/4893 just added mdTooltipClass
So you can change line-wrapping behavior on specific tooltips now. :+1:

EDIT: However, you'll need to use https://github.com/angular/material2-builds until an official release.

[danieleds]

This has now been released (beta.7)

[StevenRasmussen]

@kara or @jelbourn Should be able to close this since #4893 was released.

[shedar]

CSS "white-space: pre-line" doesn't work well due to extra line break and spaces before the message in the component template
https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.html#L6
As a result, in AOT mode you always have an extra empty line above the message with pre-line mode and also extra spaces with pre/pre-wrap modes.
So multiline mode is still unusable, I'd say it should be reopened until template is fixed.

[trevorade]

@shedar, I went ahead and fixed this and it's merged into angular:master now.

I don't know much about their release timings so you probably still have a bit of a wait ahead of you until this fix lands for you to use.

[nosshar]

It's possible to use following style definition to take all 'n' into account:

mat-tooltip-component > .mat-tooltip {
white-space: pre;
}

Still it would be nice to have HTML makup inside tooltip.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}