Add line break within tooltips

Question

How can line breaks be added within a HTML tooltip?

I tried using
and \\n within the tooltip as follows:

Answer 1

Just use the entity code 
 for a linebreak in a title attribute.

Answer 2

Just add a data attribute

data-html="true"

and you're good to go.

Eg. usage:

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>

It has worked in majority of the tooltip plugins i have tried as of now.

Answer 3

So if you are using bootstrap4 then this will work.

<style>
   .tooltip-inner {
    white-space: pre-wrap;
   }

</style>

<script> 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

If you are using in Django project then we can also display dynamic data in tooltips like:

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>

Answer 4

The 
 combined with the style white-space: pre-line; worked for me.

Answer 5

I found it. It can be done by simply doing like this

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

Answer 6

\n

with the styling

.tooltip-inner {
    white-space: pre-line;
}

worked for me.