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

Well if you are using Jquery Tooltip utility, then in "jquery-ui.js" Javascript file find following text:

tooltip.find(".ui-tooltip-content").html(content);

and put above that

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

I hope this will also work for you.

Answer 2

if you are using jquery-ui 1.11.4:

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        content: function() {
            // support: IE<9, Opera in jQuery <1.7
            // .text() can't accept undefined, so coerce to a string
            var title = $( this ).attr( "title" ) || "";
            // Escape title, since we're going from an attribute to raw HTML
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },

Answer 3

use 
 should work (I've tested in Chrome, Firefox and Edge):

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>

Answer 4

This css will help you.

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }

Answer 5

Grater than Jquery UI 1.10 is not support to use html tag inside of the title attribute because its not valid html.

So the alternative solution is to use tooltip content option. Refer - http://api.jqueryui.com/tooltip/#option-content

Answer 6

Just add data-html="true"

<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>