使用jQuery数据属性在伪元素的内容中插入新行

Question

我正在尝试使用伪元素创建工具提示。工具提示的内容是使用javascript创建的，并使用jQuery添加到元素的data-*属性中。

这是我要尝试的：http://jsfiddle.net/8nnwytbL/1599/

Javascript：

var toolTipText = "Line 1. 
 Line 2";

$(element).attr("data-tooltip", toolTipText);

CSS：

[data-tooltip]:after {
    content: attr(data-tooltip);
    background-color: black;
    white-space: pre;
}

在SO中经过很多问题之后，我发现：

1. 如果您直接在html中定义数据属性，则可以通过这种方式工作：

   <span data-tooltip= "Line 1 &#xa; Line 2"></span>

2. 如果内容直接用CSS编写，则它使用\A转义序列工作。 （来自content属性规范）

   content: 'Line 1. \A Line 2.'

请让我帮助了解jQuery方式到底出了什么问题？

Answer 1

尝试一下：

var toolTipText = "Line 1. 
 Line 2";
$(element).attr("data-tooltip", $.parseHTML(toolTipText)[0].data)

  

jQuery.parseHTML使用本机方法将字符串转换为一组   DOM节点，然后可以将其插入文档中。

Answer 2

改为使用“ \ A ”

$(function(){
var toolTipText = 'This is Line 1. \\A This is Line 2.';
$('#hoverMe').attr('data-tooltip' , toolTipText);

});