Semantic-UI: Add line break in tooltip

Question

I want to have line breaks in my tooltip:

<span data:data-tooltip="line 1 ...\n 
                              line 2 ...">

I tried several proposals from here: Add line break within tooltips

Nothing did the trick. I use it without Javascript (v.2.2)

Answer 1

If you require to use the no JS version of tooltip, you may adjust the width of the tooltip and set the white-space to normal. PEN

Answer 2

You may use data-html instead of data-tooltip with a <br/> tag.

<div class="ui icon button" data-html="<p>First line <br/> Second line</p>">
  <i class="add icon"></i>
</div>

This solution needs Javascript, see PEN

Answer 3

Because i found this first via google, its good to complete:

You can also use 
 in combination with white-space: pre; like stated here: CSS data attribute new line character & pseudo-element content value

Answer 4

This is similar to @terraloader's answer, but I wanted to give it more context.

This is the best non-Javascript solution for adding a line break in a Semantic UI tooltip.

Add the following rule to your stylesheet:

[data-tooltip]::after {
    white-space: pre;
}

And then, in your data-tooltip attribute, use the 
 *

Here's how:

<span data-tooltip="If you want to remove&#xa;this item from the&#xa;list, click here.">
    <i class="red delete icon"></i>
</span>

_{* This is the HTML-Encoded Line Feed character (using a hexadecimal value). You can also use the decimal notation 
. Either way, they are functionally equivalent to \n which is a Line Feed.}