Add line break within tooltips

Question

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.

I 've had the same question: http://stackoverflow.com/questions/3320081/how-does-stack-overflow-display-tooltip-for-the-questions — San, Jul 27 '10 at 05:23
use
data-html="true"
Ref and thanks to: http://stackoverflow.com/a/19001875/2278891 — Sunit, Dec 06 '14 at 12:11
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 '15 at 20:19
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; }` — Corina Roca, Jun 21 '21 at 12:58

score 340 · Accepted Answer · answered Feb 02 '12 at 19:20

340

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

answered Feb 02 '12 at 19:20

Fred Senese

3,480
1
14
2

24

if entity code doesn't work, try i am using linux and chrome not sure about other browsers – Krishna Nov 01 '16 at 09: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? – Riaan Schutte Mar 17 '17 at 02:04
1

For me ` ` din't work for me in Windows, Chrome v53. But ` ` worked fine. – Lucky Jun 08 '17 at 13:48
13

I just used both versions, ` `, seems to work quite well :) – Phe0nix Jul 25 '17 at 09:12
7

doesn't work in Firefox v58. However 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. – Pretty Cool Feb 27 '18 at 00:00
Does not work in IE, and neither does . Why do browsers suck so bad that nobody can ever provide a real answer to questions like this? – pabrams Jul 12 '18 at 14:06
This does not work if title attribute is dynamically set using javascript – Irfanullah Jan Apr 03 '19 at 15:58
7

both codes didnt work in my asp.net webform application, this method resolved the requirement. `data-toggle="tooltip" data-html="true" title="some string
some string"` – Pranesh Janarthanan May 10 '19 at 14:03
1

Neither or worked for me...but the suggestion from Pranesh worked great. data-html="true" +
= FTW – user2662680 Jul 11 '19 at 14:10

siwalikm · Answer 2 · 2021-04-07T15:21:47.833

114

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.

edited Apr 07 '21 at 15:21

answered Nov 10 '16 at 12:59

siwalikm

1,792
2
16
20

6

data-html="true" with
in title text works perfectly. – viks Jul 13 '18 at 08:18
3

None of the above solutions worked for me. But this one works nice. – abby May 02 '19 at 07:00
1

I believe there is a missing ">" just before "" I tried to edit myself, but the 'edit queue' is full. – Rub Apr 03 '21 at 12:04
Doesn't this require bootstrap? OP was using `` – Tim Erickson Sep 18 '21 at 20:00
Didn't work to me. Angular 10. – Davidson Lima Nov 11 '21 at 20:28

score 70 · Answer 3 · answered Jun 18 '13 at 15:06

70

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

answered Jun 18 '13 at 15:06

GuitarWorker

701
5
3

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 05 '15 at 15:30
@JimD what class/element does the style rule need to be applied to? – Judah Meek Jun 12 '16 at 00:33
For me this works fine without any custom css on tooltips. – ST-DDT Sep 19 '16 at 14:47
2

This is the one you are looking for friends. – Henrik Petterson Jun 02 '17 at 11:01
5

Actually, the character should be ` `: https://stackoverflow.com/questions/6502054/web-tooltip-universally-accepted-linebreak-character – Henrik Petterson Jun 02 '17 at 12:03
The pre-line did the trick, but it only worked for me with – Loosie94 Nov 04 '20 at 08:18

score 40 · Answer 4 · edited May 23 '17 at 12:34

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?

edited May 23 '17 at 12:34

Community

1
1

answered Oct 31 '13 at 20:26

Dan

1,729
18
11

@Dan Came here looking for help. My tooltip text was continuing outside the box. This worked! +1 – DevOpsSauce Sep 08 '16 at 15:57

score 19 · Answer 5 · answered Oct 24 '17 at 09:56

19

\n

with the styling

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

worked for me.

answered Oct 24 '17 at 09:56

klausf

289
2
8

`\n` is to be used in javascript, for HTML we should use ` ` or ` ` or both – S.Serpooshan Aug 30 '22 at 10:25

score 12 · Answer 6 · edited Feb 27 '15 at 13:19

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

edited Feb 27 '15 at 13:19

Ajith Renjala

4,934
5
34
42

answered Feb 27 '15 at 06:04

Priyanka Thakur

203
3
3

score 8 · Answer 7 · answered Jul 27 '10 at 05:37

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>

answered Jul 27 '10 at 05:37

Aakash Chakravarthy

10,523
18
61
78

score 7 · Answer 8 · answered May 08 '19 at 04:41

7

just use \n in title and add this css

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

answered May 08 '19 at 04:41

Dhanushka

81
1
3

score 5 · Answer 9 · answered Jan 25 '13 at 21:06

5

<br /> did work if you are using qTip

answered Jan 25 '13 at 21:06

Eduardo Molteni

38,786
23
141
206

score 5 · Answer 10 · edited Jun 20 '20 at 09:12

The javascript version

Since  (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>

amine · Answer 11 · 2020-06-05T13:16:34.000

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>

edited Jun 05 '20 at 13:16

answered Jun 05 '20 at 12:12

amine

373
1
5
12

Babo Darbinyan · Answer 12 · 2017-10-22T17:05:56.130

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>

edited Oct 22 '17 at 17:05

answered Aug 15 '17 at 17:58

Babo Darbinyan

49
4

score 2 · Answer 13 · edited Jul 08 '13 at 14:55

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.

edited Jul 08 '13 at 14:55

michaelb958--GoFundMonica

4,617
7
31
35

answered Jul 08 '13 at 14:35

user2052547

21
1

I think it's messy though, to have broken lines in the code – Fandango68 Jul 11 '16 at 02:00

Ross · Answer 14 · 2010-07-27T06:58:12.893

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.

edited Jul 27 '10 at 06:58

answered Jul 27 '10 at 04:47

Ross

511
3
12

score 2 · Answer 15 · answered Mar 18 '19 at 14:27

2

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

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

answered Mar 18 '19 at 14:27

Renish Gotecha

2,232
22
21

score 2 · Answer 16 · answered Jun 12 '20 at 06:42

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>

score 1 · Answer 17 · answered May 13 '13 at 14:00

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.

score 1 · Answer 18 · answered Apr 06 '19 at 18:18

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.

answered Apr 06 '19 at 18:18

Mukul Kumar Jha

1,062
7
19

+1, Your solution worked . my sample code: `data-toggle="tooltip" data-html="true" title="some string
some string"` . – Pranesh Janarthanan May 10 '19 at 14:01
Good to hear that – Mukul Kumar Jha May 12 '19 at 01:18

score 0 · Answer 19 · answered Sep 04 '13 at 16:29

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

score 0 · Answer 20 · answered Apr 10 '14 at 05:38

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

answered Apr 10 '14 at 05:38

Jaison James

4,414
4
42
54

score 0 · Answer 21 · answered Mar 03 '15 at 16:18

0

Use

&#013

There shouldn't be any ; character.

answered Mar 03 '15 at 16:18

user1464581

377
2
10

score 0 · Answer 22 · answered Feb 04 '16 at 15:43

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 );
             },

omostan · Answer 23 · 2018-01-11T11:42:15.533

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:

configuration
controller
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

score 0 · Answer 24 · answered Feb 23 '18 at 03:50

0

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

.html("This is a first line." + "<br/>" + "This is a second line.")

answered Feb 23 '18 at 03:50

Raj Stha

1,043
11
18

this is not for title/tooltips. your code is for normal HTML content – S.Serpooshan May 24 '22 at 04:38

score 0 · Answer 25 · answered Nov 13 '19 at 08:52

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

Adir Harel · Answer 26 · 2019-08-06T12:41:11.343

-1

This css will help you.

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

or if you want in one line

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

edited Aug 06 '19 at 12:41

answered Aug 06 '19 at 07:02

Adir Harel

1
1

Add line break within tooltips

26 Answers26

The javascript version

In addition,

Linked

Related