csssemantic-ui

Semantic-UI: Add line break in tooltip

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)

Solution

  • 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