Вставить новую строку в содержимое псевдоэлемента, используя атрибуты данных 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. Работает с использованием escape-последовательности \A, если содержимое написано непосредственно в CSS.(из содержимого спецификации свойств)

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

Пожалуйста, позвольте мне помочь понять, что именно не так с моим способом jQuery?

Answer 1

используйте ' \ A ' вместо

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

});

Answer 2

Попробуйте это:

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

jQuery.parseHTML использует собственные методы для преобразования строки в набор узлов DOM, которые затем можно вставить в документ.