允许 或换行到 jquery 工具提示答案

【问题标题】：Allow or New Line to jquery tooltip允许 或换行到 jquery 工具提示
【发布时间】：2017-07-26 20:02:59
【问题描述】：

我想知道如何在工具提示中创建一个新行并让工具提示更宽

我尝试添加  , , , \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>

【问题讨论】：

标签： jquery html

【解决方案1】：

您将内容设置为文本...使用html() 而不是text()

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

【讨论】：

知道如何使工具提示的宽度与文本相同吗？因为如果文本太长，工具提示会结束，但文本会继续，看起来真的很难看。我知道宽度是 .tooltip .tooltiptext {width: 120px;但我希望它自动调整大小，我尝试将其设置为 100%，但它并没有真正起作用。
取决于您使用的插件以及它具有哪些功能
没有插件，你在代码中看到的就是我的。没关系，我将其大小调整为 240 像素，并且不需要更多空间。感谢您的帮助。

【解决方案2】：

见：jQuery tooltip add line break

还有：How to break line in jQueryUI tooltip

使用 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" );
        }
      }
    });
  } );

【讨论】：