jQuery工具提示添加换行符

Question

所以,我想获取我有几个div的内容<br/>,然后使用jQuery工具提示小部件将其作为title属性传递.我希望这些线在工具提示中出现在另一个之下.谢谢.到目前为止的代码是:

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

只需
在title属性中使用实体进行换行即可.

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就会呈现出来，而不是转义并按原样编写。