Всплывающая подсказка на CSS

Рассмотрим реализацию простой текстовой подсказки, всплывающей при наведении мыши на элемент. Особенностью способа является использование только CSS стилей, без JavaScript кода.

HTML разметка:

<button data-hint="Ваша подсказка">Наведите курсор на кнопку</button>

Для элемента, над которым требуется вывести всплывающую подсказку, добавляем атрибут «data-hint». Он должен содержать простую текстовую строку. Использование html тегов недопустимо.

CSS стили:

[data-hint] {
  position: relative;
  cursor: hint;
}

[data-hint]::after {
    opacity: 0;
    width: max-content;
    color: #FFFFFF;
    background-color: rgba(0,0,0,.7);
    border-radius: 6px;
    padding: 10px;
    content: attr(data-hint);
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    transition: opacity 0.2s;
}

[data-hint]:hover::after {
    opacity: 1;
}

Для элементов с атрибутом «data-hint» устанавливаем относительное позиционирование и создаём псевдоэлемент «after». Он будет иметь абсолютное позиционирование и содержимое текстовой подсказки.

Разбор стилей:

• opacity: 0 — устанавливаем полную прозрачность;
• width: max-content — ширина вычисляется в зависимости от содержимого;
• transform: translate(-50%, -100%) — центрирование подсказки по горизонтали над основным элементом;
• pointer-events: none — отключаем события мыши над псевдоэлементом;
• transition: opacity 0.2s — плавное изменение прозрачности;

Позиционирование

Для подсказки справа добавляем элементу класс «hint-right»:

.hint-right::after {
    top: 50%;
    left: auto;
    right: -5px;
    transform: translate(100%, -50%);
}

Для позиционирования слева добавляем класс «hint-left»:

.hint-left::after {
    top: 50%;
    left: -5px;
    transform: translate(-100%, -50%);
}

Аналогично вывод снизу «hint-bottom»:

.hint-bottom::after {
    top: auto;
    bottom: -5px;
    transform: translate(-50%, 100%);
}

В примерах используется небольшой отступ «-5px» от основного элемента. В некоторых случаях его можно установить равным нулю.

Кроме предложенного способа можете воспользоваться готовой миниатюрной css библиотекой «Hint.css». Она предлагает аналогичное решение, но в другом оформлении.