How to add line break in title attribute using jquery

问题

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

回答1:

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

回答2:

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.

回答3:

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

回答4:

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>

来源：https://stackoverflow.com/questions/37476334/how-to-add-line-break-in-title-attribute-using-jquery

标签

javascript

jquery

html

qualtrics