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

Доброго времени суток. Я использую всплывающие подсказки, вот так:
<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 и отображаться правильно ?
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 1
godsplane
@godsplane
Через content attr() никак да и не нужно в data атрибуте использовать html
Проще через js получать значение дата атрибута и засовывать его куда надо, для этого так же есть готовые библиотеки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы