jQuery 工具提示添加换行符

Question

所以，我想获取包含多个<br/> 的 div 的内容，然后使用 jQuery 工具提示小部件将其作为标题属性传递。我希望这些线条出现在工具提示内的另一个下方。谢谢。到目前为止的代码是：

CSS

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>

Answer 1

有一个纯 CSS 解决方案。使用 \n 换行，并添加此 CSS 样式：

.ui-tooltip {
    white-space: pre-line;
}

如果您想保留空格，也可以使用 pre 或 pre-wrap 代替 pre-line。 见https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

只需在标题属性中使用实体
 换行即可。

Answer 3

这是我用最新的 jquery / jqueryui 做的技巧（假设你想要工具提示的所有项目都有类'jqtooltip'，它们有标题标签，并且标题有一个管道字符作为行分隔符：

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});

Answer 4

您可以使用工具提示小部件的“内容”选项。另见：

http://jqueryui.com/tooltip/#custom-content

简短示例：

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });

Answer 5

您可以将 HTML 直接输入到 Title 属性中，然后简单地调用以下命令：

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

这样你的 HTML 被渲染而不是转义和字面书写。

Answer 6

最好用这个：

$(document).tooltip({
   content: function () {
     return $( this ).prop( 'title' ).replace( '|', '<br />' );
   }
});

function(callback) 我遇到了工具提示问题，它没有关闭

Answer 7

我用过这个：

        $("[title]").each(function(){
            $(this).tooltip({ content: $(this).attr("title")});
        });

这意味着所有具有title属性的元素都将使用jquery工具提示，并且工具提示内容将使用title属性的值。 内容允许html。

Answer 8

我选择了 ScottRFrost 答案的修改版本。他的示例的问题是 .replace 仅替换字符串中字符的第一个实例。这是一个修改后的版本，它将使用正则表达式的 /g（全局）来修改整个字符串中字符的所有实例。

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});