53

How to add line break in tooltip I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code

http://codepen.io/apps4any/pen/RWQLyr

Html

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
  <md-content layout-padding="">
    <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
      <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
      <md-tooltip>
        List1<br>
        List2<br>
        List3<br>
        List4
      </md-tooltip>
    </md-button>
    <div style="margin-top: 150px;">
    </div>
  </md-content>
</div>

CSS:

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
  box-shadow: none;
  border: none;
  transform: none;
  -webkit-transform: none; }
.tooltipdemoBasicUsage .left {
  top: 70px !important;
  left: 56px !important; }
.tooltipdemoBasicUsage .right {
  top: 70px !important;
  right: 56px !important; }

JS

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.demo = {};
});
apps4any
  • 603
  • 1
  • 6
  • 6

8 Answers8

47

Adding this CSS seems to work in your case (with the <br>s):

md-tooltip .md-content {
    height: auto;
}

I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.

Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:

md-tooltip.tt-multiline .md-content {
    height: auto;
}

Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.

In this case use

md-tooltip ._md-content {
    height: auto;
}

and for specific class

md-tooltip.tt-multiline ._md-content {
    height: auto;
}
Icycool
  • 7,099
  • 1
  • 25
  • 33
  • As far as I can see, when having multi lines, the positioning is not working very well if it is at the end of the page. I am using a button with a tooltip which is then on top of the button. – Philipp Nov 07 '16 at 22:12
  • @Icycool: I have a dynamic element to be rendered as a tooltip, so don't have an option to add
    there. Any idea on how to show the tooltip so the text renders on the next line instead of getting clipped?     – user1242321 Nov 22 '16 at 23:27
  • @user1242321 You can check css `white-space:pre` or `white-space:pre-wrap` – Icycool Nov 23 '16 at 04:03
  • It's worth noting that angular material class names prefixed with an underscore are temporary styles that will change in future versions. – Adam Nov 24 '16 at 13:18
  • user1242321 see my answer @ bottom – Pipo Jan 06 '20 at 17:09
11

Since angular-material version >1.1.2 you can simply override .md-tooltip class:
(JsFiddle)

.md-tooltip {
    height: auto;
}

And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)

HTML

<md-tooltip class="tooltip-multiline">
    I'm a multiline <br/> tooltip
</md-tooltip>

CSS

.tooltip-multiline {
  height: auto;
}

both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions

The.Bear
  • 5,621
  • 2
  • 27
  • 33
7

Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/> into it.

md-tooltip .md-content {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
}

md-tooltip {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
    overflow: visible !important;
    white-space: normal !important;
}

md-tooltip ._md-content {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
}
kenny
  • 1,628
  • 20
  • 14
5

You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

My own overwrites to the material design styling to allow nice looking multi-line tooltips:

md-tooltip {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  .md-background {
    border-radius: inherit;
  }
  .md-content {
    height: auto;
    width: 400px;
    max-width: 400px;
    padding: 8px;
    white-space: initial;
  }
}
@media screen and (min-width: 600px) {
  md-tooltip .md-content {
    font-size: 14px;
    height: auto;
    width: 300px;
    padding: 8px;
    max-width: 300px;
  }
}
autumn
  • 51
  • 2
3

Or you can use white-space: pre-line; in the custom class of your md tooltip. :)

iQhry
  • 91
  • 8
1

After a while searching for a solution FROM A VARIABLE CONTENT:

.ts

public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'

.html

  <button mat-icon-button aria-hidden="false" class="material-icons-outlined"
      [matTooltip]="matTooltipContent"
      matTooltipClass="allow-cr"
      (click)="onInfoButtonClicked($event)">
    <mat-icon >help_outlined</mat-icon>
  </button>

.css

.allow-cr {
  white-space: pre;
}

See stackblitz example

Pipo
  • 4,653
  • 38
  • 47
0

I am using angular_material 1.1.8, for me single answer didn't work, a combination did.

html

<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>

css

.tooltip-multiline {
    height: auto;
    white-space: pre-line; 
    max-width:300px;
    line-height: 14px; /*optional*/
    font-weight:200;/*optional*/
    letter-spacing: 0.5px; /*optional*/
    font-size:11px;/*optional*/     
}

Hope it helps..

Sankha Karunasekara
  • 1,636
  • 18
  • 19
0

angular material tool tip is warping all content in div so this its working 

<md-tooltip class="tooltip-multiline" md-direction="left">
          This is tooltip
</md-tooltip>

.tooltip-multiline div{
  height: auto;
}
Murali
  • 409
  • 11
  • 17