223

How can line breaks be added within a HTML tooltip?

I tried using <br/> and \n within the tooltip as follows:

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

However, this was useless and I could see the literal text <br/> and \n within the tooltip. Any suggestions will be helpful.

4
  • 5
    I 've had the same question: stackoverflow.com/questions/3320081/…
    – San
    Jul 27, 2010 at 5:23
  • 2
    use <pre>data-html="true"</pre> Ref and thanks to: stackoverflow.com/a/19001875/2278891
    – Sunit
    Dec 6, 2014 at 12:11
  • 1
    In asp.net (C# .NET 4.5 Framework) adding Environment.NewLine works to add a line break from the code side... no fuss.. no muss...
    – Danimal111
    Feb 19, 2015 at 20:19
  • 1
    The answer below, by Dan works perfectly. It is assing in the CSS for that element the line white-space as following: .tooltip-inner { white-space: pre-wrap; } Jun 21, 2021 at 12:58

26 Answers 26

337

Just use the entity code &#013; for a linebreak in a title attribute.

11
  • 24
    if entity code &#013; doesn't work, try &#10; i am using linux and chrome not sure about other browsers
    – Krishna
    Nov 1, 2016 at 9:20
  • 5
    I tried this and it works when I inject it using inspect element, but not when I include it in my html and deploy it with this character. Any obvious reason I might be missing? Mar 17, 2017 at 2:04
  • 12
    I just used both versions, &#013;&#010;, seems to work quite well :)
    – Phe0nix
    Jul 25, 2017 at 9:12
  • 7
    &#013; doesn't work in Firefox v58. However &#10 does work fine. Using @Phe0nix solution of using both line-breaks as required works well to get it to work in Chrome, Microsoft Edge and Firefox. Feb 27, 2018 at 0:00
  • 6
    both codes didnt work in my asp.net webform application, this method resolved the requirement. data-toggle="tooltip" data-html="true" title="some string <br/> some string" May 10, 2019 at 14:03
112

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.

5
  • 6
    data-html="true" with <br /> in title text works perfectly.
    – viks
    Jul 13, 2018 at 8:18
  • 3
    None of the above solutions worked for me. But this one works nice.
    – abby
    May 2, 2019 at 7:00
  • 1
    I believe there is a missing ">" just before "</i>" I tried to edit myself, but the 'edit queue' is full.
    – Rub
    Apr 3, 2021 at 12:04
  • Doesn't this require bootstrap? OP was using <title> Sep 18, 2021 at 20:00
  • Didn't work to me. Angular 10. Nov 11, 2021 at 20:28
70

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

6
  • 3
    I spent a while trying to get this to work. The fact that the white-space: pre-line; style is needed is very hidden.
    – Jim D
    Jun 5, 2015 at 15:30
  • @JimD what class/element does the style rule need to be applied to?
    – Judah Meek
    Jun 12, 2016 at 0:33
  • For me this works fine without any custom css on tooltips.
    – ST-DDT
    Sep 19, 2016 at 14:47
  • 2
    This is the one you are looking for friends. Jun 2, 2017 at 11:01
  • 5
    Actually, the character should be &#010;: stackoverflow.com/questions/6502054/… Jun 2, 2017 at 12:03
40

This CSS is what finally worked for me in conjunction with a linefeed in my editor:

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

Found here: How to make Twitter bootstrap tooltips have multiple lines?

1
  • @Dan Came here looking for help. My tooltip text was continuing outside the box. This worked! +1 Sep 8, 2016 at 15:57
19
\n

with the styling

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

worked for me.

1
  • \n is to be used in javascript, for HTML we should use &#10; or &#13; or both Aug 30, 2022 at 10:25
12

Give \n between the text. It work on all browsers.

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

This will work for me and it's used in code behind.

Hope this will work for you

0
8

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

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

just use \n in title and add this css

.tooltip-inner {
    white-space: pre-wrap;
}
5

The javascript version

Since &#013; (html) is 0D (hex), this can be represented as '\u000d'

str = str.replace(/\n/g, '\u000d');

In addition,

Sharing with you guys an AngularJS filter that replaces \n with that character thanks to the references in the other answers

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

usage

<div title="{{ message | titleLineBreaker }}"> </div>
5

You can use bootstrap tooltip, and don't forget to set the html option to true.

<div id="tool"> tooltip</div>
$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
4

&lt;br /&gt; did work if you are using qTip

0
4

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>
2

it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines.

However, I'd recommend using a jQuery tooltip plugin such as Q-Tip: http://craigsworks.com/projects/qtip/.

It is simple to set up and use. Alternatively there are a lot of free javascript tooltip plugins around too.

edit: correction on first statement.

2

For me, a 2-step solution (combination of formatting the title and adding the style) worked, as follows:

1) Format the title attrbiute:

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

2) Add this style to the tips element:

white-space: pre-line;

Tested in IE8, Firefox 22, and Safari 5.1.7.

1
  • I think it's messy though, to have broken lines in the code
    – Fandango68
    Jul 11, 2016 at 2:00
2

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

1

Just use the entity code &#xA; for a linebreak in a title attribute.

<a title="First Line &#xA;Second Line">Hover Me </a>

1

Just add this code snippet in your script:

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

and ofcourse as mentioned in above answers the data-html should be "true". This will allow you to use html tags and formatting inside the value of title attribute.

2
  • +1, Your solution worked . my sample code: data-toggle="tooltip" data-html="true" title="some string <br/> some string" . May 10, 2019 at 14:01
  • Good to hear that 👍 May 12, 2019 at 1:18
0

The solution for me was http://jqueryui.com/tooltip/:

And here the code (the part of script that make <br/> Works is "content:"):

HTML HEAD

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

ASPX or HTML control

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

Hope this help someone

0

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

0

Use

&#013

There shouldn't be any ; character.

0
0

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 );
             },
0
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip, uib-tooltip-template and uib-tooltip-html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

In my case, I opted for uib-tooltip-html and there are three parts to it:

  1. configuration
  2. controller
  3. HTML

Example:

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

For more information, please check here

0

Using .html() instead of .text() worked for me. For example

.html("This is a first line." + "<br/>" + "This is a second line.")
1
  • this is not for title/tooltips. your code is for normal HTML content May 24, 2022 at 4:38
0

Hi this code will work in all browser !!i used for new line in chrome and safari and ul li for IE

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }
-1

This css will help you.

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

or if you want in one line

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.