Question

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

我试图添加一个<br>, <br />, <br/>, \n, /n, , 
 ......没有任何工作要做：（

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

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

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

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

2 个答案: