How to add line break in title attribute using jqu

2019-07-11 03:24发布

站内问答 / JavaScript
1776 4 5

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

4条回答
三岁会撩人
2楼-- · 2019-07-11 03:35

Use entity code &#010; for line break. Your code will look something like this:

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

Refer this FIDDLE

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-07-11 03:38

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.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2019-07-11 03:48

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

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
5楼-- · 2019-07-11 03:52

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)