0

I tried to have a multiline tooltip with below example. you can see \n is displaying in the tooltip. I want to have a break as we do with html kind of tooltip https://stackblitz.com/edit/angular-1e3np3-hbxpo2?file=app%2Ftooltip-auto-hide-example.css

Sumanth Itha
  • 89
  • 1
  • 9
  • You can't put html in tooltips. This is contrary to the [material design spec](https://material.io/design/components/tooltips.html#implementation). Checkout [this feature request](https://github.com/angular/material2/issues/5440) for more information – Tim Martens Aug 22 '18 at 08:11
  • Possible Duplicate of https://stackoverflow.com/questions/47058483/angular-2-material-mattooltip-multiline https://stackoverflow.com/questions/33293599/how-to-add-line-breaks-within-tooltip-in-angular-material-design – SiddAjmera Aug 22 '18 at 08:12
  • this is not latest material design @s – Sumanth Itha Aug 22 '18 at 08:51
  • i want it with angular 2 or above. its not working for that – Sumanth Itha Aug 22 '18 at 09:03
  • Please see the below link of how i want to render the tooltip https://stackblitz.com/edit/angular-1e3np3-hbxpo2?file=app%2Ftooltip-auto-hide-example.css – Sumanth Itha Aug 23 '18 at 11:25

1 Answers1

4

It is working but you need to increase the width of the tooltip if you want a clearer effect - StackBlitz

::ng-deep .material-tooltip {
  white-space: pre-line;
  max-width: 500px !important;
}

enter image description here

camden_kid
  • 12,591
  • 11
  • 52
  • 88