How to add line break in title attribute using jquery

Question

Please find my code below which adds a tooltip on mouseover event to a field in my survey engine. What I want to achieve is add line breaks to the tooltip. Any help is greatly appreciated.

var $j = jQuery.noConflict();

$j('#choice31QID405').mouseover(function() { 
$j(this).attr('title','My name is Glenn. <Add a line break>. I am a good boy'. <Add a line break>. I live in New Delhi); 
})

$j('#choice31QID405').mouseout(function() { 
$j(this).removeAttr('title'); 
})

Possible duplicate of [How can I use a carriage return in a HTML tooltip?](http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip) — Anupam, May 27 '16 at 06:41
no it is not duplicate. I am performing the action from jquery — Glenn, May 27 '16 at 06:51
If you go through all the solutions in that post you will find [javascript](http://stackoverflow.com/a/13205056/456135) solution there. Anyway approach is same. — Anupam, May 27 '16 at 07:08

T.J. Crowder · Answer 1 · 2021-06-02T09:25:30.623

7

On modern browsers, you can just use a line break:

$("#target").attr("title", "Hello\nWorld");

<p title="Hello
World">
This one is hardcoded in the HTML.
</p>
<p id="target">
This one is added later
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

That works fine on current (as of this writing) Chrome and Firefox, as well as IE11.

edited Jun 02 '21 at 09:25

answered Mar 21 '17 at 11:42

T.J. Crowder

1,031,962
187
1,923
1,875

Vibhor Dube · Answer 2 · 2016-05-27T06:48:59.047

4

Use entity code 
 for line break. Your code will look something like this:

$j(this).attr('title','My name is Glenn.
I am a good boy'.
I live in New Delhi);

Refer this FIDDLE

edited May 27 '16 at 06:48

answered May 27 '16 at 06:37

Vibhor Dube

4,173
1
22
32

Please elaborate your issue. – Vibhor Dube May 27 '16 at 07:01
1

on the browser.. is appearing as part of tooltip. – Glenn May 27 '16 at 07:02
Which browser are you using? Is the value of title attribute properly wrapped inside quotes? – Vibhor Dube May 27 '16 at 07:20
i tested on firefox. yes it is wrapped inside quotes. – Glenn May 27 '16 at 11:33

score 0 · Answer 3 · answered May 27 '16 at 06:51

use <Hr> tag in HTML to set line

here is working example,

   

 var $j = jQuery.noConflict();

    $j('#choice31QID405').mouseover(function() { 
    $j(this).attr('title','My name is Glenn. <hr />. I am a good boy <hr /> I live in New Delhi'); 
      $j('#test').html($j(this).attr('title'));
    });

    $j('#choice31QID405').mouseout(function() { 
    $j(this).removeAttr('title'); 
      $j('#test').html("");
    });

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
      <title>JS Bin</title>
    <body>
      <div id="choice31QID405">Mouse over here</div>
      <div id="test">Tooltip will show up here..</div>
    </body>

dude I cannot add ids to HTML. I am programming on survey platform. The html is generated on the fly. I cannot control it. — Glenn, May 27 '16 at 06:54

How to add line break in title attribute using jquery

3 Answers3

Linked