使用 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: '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);
});