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');
})
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
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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>That works fine on current (as of this writing) Chrome and Firefox, as well as IE11.
html entity will work as mentioned above
Here is the full list of htmlentities that you can map in your code
https://dev.w3.org/html5/html-author/charref
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>
