Как в Tooltip использовать HTML?

Question

[Александр Андропов]

Доброго времени суток. Я использую всплывающие подсказки, вот так:

<a href='#' class='myPopover' data-tooltip='Подсказка в которой хочу использовать HTML'>Ссылка 1</a>
<a href='#' class='myPopover' data-tooltip='Подсказка в которой хочу использовать HTML'>Ссылка 2</a>

Вот CSS:

[data-tooltip] {
    position: relative; 
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 300px;
    left: 0; top: 0;
    background: #25292d; 
    color: #fff;
    padding: 0.5em; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    pointer-events: none; 
    opacity: 0; 
    transition: 1s; 
} 

[data-tooltip]:hover::after {
    opacity: 1;
    top: 2em; 
}

Если внутри атрибута использовать HTML для красивой стилизации - то он его воспринимает как обычный текст.
Как мне заставить эти подсказки "читать" HTML и отображаться правильно ?

Comments

[Ankhena]

Замените псевдо и data на обычный span (div или что там больше подходит по смыслу).

Answer 1

[godsplan]

Через content attr() никак да и не нужно в data атрибуте использовать html
Проще через js получать значение дата атрибута и засовывать его куда надо, для этого так же есть готовые библиотеки

Comments

[Александр Андропов]

А без JS как-то можно будет обойтись ?

[godsplan]

Александр Андропов, а что у вас аллергия на js?Можно, но решение не универсальное будет,.
можно например текст тултипа закидывать не в дата аттрибут, а просто в элемент, который изначально будет скрыт,но это лишние элементы, ну и что вам такого нужно от html, чему вы не можете прописать стили в :after?