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)

score 5 · Answer 1 · answered Feb 09 '18 at 13:00

5

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

answered Feb 09 '18 at 13:00

Gibin Ealias

2,751
5
21
39

score 4 · Accepted Answer · edited Feb 10 '18 at 05:28

4

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

edited Feb 10 '18 at 05:28

pme

14,156
3
52
95

answered Feb 09 '18 at 12:09

Gibin Ealias

2,751
5
21
39

1

thanks, I take this solution. As this needs Javascript, I edited your answer to accept it – pme Feb 09 '18 at 18:15

score 2 · Answer 3 · answered Oct 21 '19 at 08:51

2

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

answered Oct 21 '19 at 08:51

terraloader

311
2
10

score 2 · Answer 4 · answered Jul 01 '20 at 15:32

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

score 0 · Answer 5 · answered Jul 07 '23 at 22:52

Depending on what version of Semantic-ui you could jsut update the main style sheet; looks like min has white-space:norap in it. Here I have updated it to white-space:pre and then will try using the in line in the tool tip text:

[data-tooltip]:after{
    pointer-events:none;
    content:attr(data-tooltip);
    position:absolute;
    text-transform:none;
    text-align:left;
    white-space:pre;
    font-size:1rem;
    border:1px solid #d4d4d5;
    line-height:1.4285em;
    max-width:none;
    background:#fff;
    padding:.833em 1em;
    font-weight:400;
    font-style:normal;
    color:rgba(0,0,0,.87);
    border-radius:.28571429rem;
    box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
    z-index:1
}

Semantic-UI: Add line break in tooltip

5 Answers5