允許<BR>或新行jQuery的工具提示

Question

我想知道我怎麼做工具提示內新線，也使工具提示更寬

我嘗試添加一個<br>, <br />, <br/>, \n, /n, &#013;, &#10; ......似乎沒有任何合作:(

我也嘗試添加下面的腳本，但我不知道如果我正確地做了它，或者如果它是有用的

<script> 
$(document).ready(function() {   
    $('.tooltip ').tooltiptext({ 
      contentAsHTML: true, 
    }); 
}); 
</script> 

CODE：

<script> 
    // On first hover event we will make popover and then AJAX content into it. 

    $('[data-poload]').hover(function(event) { 
     var el = $(this); 
     // Commenting this (For testing purposes) 
     $.get(el.data('poload'), function(d) { 
     // set new content 
     el.find('.tooltiptext').text(d); 
     }); 
    }); 
</script> 

<style> 
    .tooltip { 
     position: relative; 
     display: table; 
    } 

    .tooltip .tooltiptext { 
     visibility: hidden; 
     width: 120px; 
     background-color: black; 
     color: #fff; 
     border-radius: 6px; 
     padding: 5px 10px; 

     /* Position the tooltip */ 
     position: absolute; 
     z-index: 1; 
    } 

    .tooltip:hover .tooltiptext { 
     visibility: visible; 
    } 

    .tooltip .tooltiptext { 
     top: -5px; 
     left: 105%; 
    } 
</style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <div class="tooltip" data-poload="//demo2307137.mockable.io/test"> 
     <img src="alerts.gif"/> 
     <br/><br/><br/> 
     <span class="tooltiptext">Loading...</span> 
    </div> 

    <div class="tooltip" data-poload="testpage.php?id=123"> 
     <img src="alerts.gif"/> 
     <br/><br/><br/> 
     <span class="tooltiptext">Loading...</span> 
    </div> 

Answer 1

要設置內容爲文本...使用html()代替text()

$.get(el.data('poload'), function(d) { 
    // set new content 
    el.find('.tooltiptext').html(d); 
    }); 

Answer 2

參見：jQuery tooltip add line break

和：How to break line in jQueryUI tooltip

使用工具提示內容http://jqueryui.com/tooltip/#custom-content

$(function() { 
    $(document).tooltip({ 
     items: "img, [data-geo], [title]", 
     content: function() { 
     var element = $(this); 
     if (element.is("[data-geo]")) { 
      var text = element.text(); 
      return "<img class='map' alt='" + text + 
      "' src='http://maps.google.com/maps/api/staticmap?" + 
      "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" + 
      text + "'>"; 
     } 
     if (element.is("[title]")) { 
      return element.attr("title"); 
     } 
     if (element.is("img")) { 
      return element.attr("alt"); 
     } 
     } 
    }); 
    });