Add Line Break Within Tooltips

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

Break HTML tooltip message using line breaks

You're using the wrong slash - new line should be \n not /n:

tooltipData="Helo,Angular 2" + "
" + "This button is used to test hover message" + "\n" + "This message should come at the last"

How to add line breaks within tooltip in angular material design

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;
}

How to make line break for ToolTip titles in Material-UI

You can wrap your title with a span and add a style to it just like below:

<Tooltip
  title={<span style={{ whiteSpace: 'pre-line' }}>{tipText}</span>}
  placement="left"
  classes={{
    tooltip: classes.tooltip,
  }}>
    <IconButton>
      <InfoOutlined />
    </IconButton>
</Tooltip>

Now, when your text includes \n anywhere, it will break the line. For example you can have a text like the following:

Hey there,\nCome here

This will be rendered like:

Hey there,
Come here

Simple html and css tooltip with newline/carriage return

You can

EDIT: This corrects my previous answer that said you can't.

Because your CSS uses content: attr() to get the text inside a specified attribute, you can use an HTML entity code such as to insert a newline.

Inserting a newline via an HTML entity code:

Note: You must set display: block and white-space: pre|pre-line|pre-wrap for the newline to display.

[data-tooltip] {    cursor: default;    font: normal 1em sans-serif;}
[data-tooltip]:hover:after {    display: inline-block;    content: attr(data-tooltip);    white-space: pre-wrap;    color: Tomato;    background-color: OldLace;    padding: 1em;}

<span data-tooltip="Sentence one here. Sentence
two here. Sentence three here.">See my CSS tooltip with HTML-entity &#xa; line break:</span>

.tooltip {
    position: relative;
    margin-right: 5px;
  display: block;
  text-align: center;
  width: 75px;
  padding: 5px;
  border: 1px dotted #000;
  margin: 70px auto;
}
.tooltip .sizing-tooltip {
    position: absolute;
    bottom: calc(100% + 13px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 300px;
}
.tooltip .content-tooltip {
    background: #000;
    color: #fff;
    padding: 5px 10px 6px;
    display: block;
    text-align: left;
    max-width: 300px;
    width: auto;
    margin: 0 auto;
}

.tooltip:hover .sizing-tooltip {
    display: flex;
}

<h1>Example</h1>

<span class="tooltip">
  short text
  <span class="sizing-tooltip">
    <span class="content-tooltip">
      Lorem
    </span>
  </span>
</span>

<span class="tooltip">
  long text
  <span class="sizing-tooltip">
    <span class="content-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Nulla nunc massa, eleifend a feugiat ac, varius eu eros.
      Praesent at vulputate risus. Pellentesque dictum pulvinar lectus.
    </span>
  </span>
</span>