Data hover — как сделать всплывающую подсказку на двух строчках?

Question

[Gracheva]

Ребята, помогите пожалуйста, как в сплывающей подсказке сделать вторую строчку. Что бы подсказка состояла из двух строк. Тег
не работает.
codepen.io/anon/pen/pjVPZw
Dolor sit amen
consectetur adipisicing elit

Answer 1

[Андрей R]

Здравствуйте, надеюсь, помогу.

Вот пример

Вы можете использовать unicode символы для переноса, например:

Вот так:

<span class="tooltip" data-tooltip="Dolor sit&#13;&#10;amen">Lorem ipsum</span>

это чтоб не переносить значение атрибута.
Но это все не будет работать без white-space: pre;

.tooltip {
  border-bottom: 1px dotted #0077AA;
  cursor: help;
  &::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip);
    white-space: pre;
    /* Главная часть кода, определяющая содержимое всплывающей подсказки */

Comments

[Gracheva]

крутяк, сейчас попробую внедрить. Спасибо пребольшущие.