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

Question

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

这是我正在尝试的: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. 它使用 \A 工作如果内容直接用 CSS 编写，则转义序列。 (来自 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 uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document.