jquery - 允许 或新行到 jquery 工具提示

Question

我想知道如何在工具提示内新建一行并使工具提示更宽

我尝试添加 <br>, <br />, <br/>, \n, /n, &#013;, &#10; ...似乎没有任何效果:(

我还尝试添加以下脚本，但我不知道我是否正确执行或它是否有用

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

代码:

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