使用 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 uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document.

Answer 2

改用'\A'

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

});