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

您可以直接在Title属性中键入HTML，然后只需调用以下内容：

$(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 />'));
   }
});