[jQuery UI]jQuery Tooltip 資訊內容換行方法

摘要:[jQuery UI]jQuery Tooltip 資訊內容換行方法

要來提到jQuery UI的Tooltip資訊內容可支援使用<br />換行的方法
 
在上篇的Code裡,要是要換行加入<br />,是最直覺的想法
但在未設置參數前,不管是加<br />或者是/n皆是無法換行的
如下圖所示:
 
jQuery attr
找元件的屬性的值
 
在啟用的Function加入:
content: function() {
      return $(this).attr('title');
}
即可在顯示資料內用<br />換行
 
來個Example範例:
「jquery_tooltip_br.html」
<!--jQuery-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  $(function() {
    $( document ).tooltip(
     {
          content: function() {
               return $(this).attr('title');
          }
     });
  });
</script>

<h1>jQuery Tooltip</h1>
Example : <input type="text" title="Hello Everybody<br />Test(br)!">

執行畫面如圖:

 

參考資料:http://stackoverflow.com/questions/13066909/how-to-break-line-in-jqueryui-tooltip