HTML имеет свои встроенные тултипы, но часто их дизайн не соответствует требованиям стиля макета. Сейчас мы научимся стилизовать тултипы. Для начала, нужно понять, что стандартный тултип - это своеобразное описание для элемента.
Самый простой вид тултипа, который мы здесь будем рассматривать, не требует от HTML практически ничего. Мы будем использовать атрибут aria-label, который служит для описания элементов скринридерам (в основном, для людей с нарушениями зрения).
Для того, чтобы через CSS "захватить" значение атрибута, необходимо использовать свойство content, использующееся с псевдоэлементами ::before и ::after.
Итак, рассмотрим код:
.tooltip {
position: relative; /* Элемент должен быть спозиционирован не статично, чтобы внутри него можно было разместить абсолютно-спозиционированный элемент */
}
.tooltip:hover::after {
content: attr(aria-label); /* Захватываем атрибут aria-label и отображаем его в ::after псевдоэлементе */
position: absolute; /* Позиционируем псевдоэлемент абсолютно */
bottom: 100%;
left: 0;
background: rgba(0,0,0,.5);
color: white;
border-radius: 4px;
padding: 8px 16px;
font-size: 12px;
cursor: default;
}
.like-button {
/* Какие-то стили для кнопки */
}
HTML:
<button class="like-button tooltip" aria-label="Like">❤</button>
Наведи на сердечко, чтобы увидеть тултип
Результат: https://codepen.io/artik-man/pen/gOYjMBN
Тултип в виде HTML-элемента
К сожалению, рассмотренный выше тултип не идеален. Что делать, если внутри него нужно разместить ссылку? А многострочный текст? Да, бывают и такие задачи. Чтобы решить эту задачу, нам придётся использовать тултип в виде HTML-элемента.
.has-tooltip {
position: relative;
}
.has-tooltip:hover .tooltip {
display: inline-block; /* Отображаем тултип только если навели мышью на элемент, его содержащий */
}
.tooltip {
display: none; /* Скрываем тултип по умолчанию */
position: absolute;
bottom: 100%;
left: 0;
min-width: 350px;
text-align: left;
background: rgba(0,0,0,.5);
color: white;
border-radius: 4px;
padding: 8px 16px;
font-size: 12px;
margin-bottom: 8px;
cursor: default;
}
.tooltip::after {
/* Это уголок */
content: '';
position: absolute;
top: 100%;
left: 4px;
border: 8px solid transparent;
border-top-color: rgba(0,0,0,.5);
}
HTML:
<button class="like-button has-tooltip" aria-label="Like">
❤
<span class="tooltip">
А здесь мы уже можем размещать различную информацию,
<br>
в том числе многострочный текст и даже
<a href="//google.com">ссылки</a>
</span>
</button>
Результат тут: https://codepen.io/artik-man/pen/ExYpyGQ
В примере показано не совсем корректное скрытие тултипа. Рекомендую использовать .visually-hidden.
Существует еще множество способов сделать тултип, но многие из них подразумевают использование JavaScript, а эта книга не о нём. На мой взгляд, то, что можно сделать без JavaScript, нужно делать без JavaScript. Конечно, и из этого правила есть исключения.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues