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

В одной из итераций работы над этим сайтом я хотел добавить всплывающие подсказки для кнопки «скопировать» в блоке с кодом.

Вот она справа --->

Забегая вперед, скажу, что эту задачу решил с помощью стандартного свойства HTML , которое позволяет показывать подсказку при наведении мышки на элемент. Вот так:

title="Скопировать"

Код, о котором я расскажу в этой заметке в итоге не пригодился, но я сохранил его, чтобы применить в другом месте.

Стили для всплывающей подсказки

Я знал, что с помощью псевдоэлемента можно делать интересные эффекты без использования JavaScript. И попросил ChatGPT написать код для всплывающих подсказок на обычном CSS, которые показываются по наведению мышки на элемент, а текст для подсказки берется из атрибута элемента. Вот, что он мне предложил:

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.25em);
  background: #171717;
  color: #fff;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  white-space: nowrap;
  font-size: 0.875em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 10;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-0.5em);
}

Разберем этот код по частям. Все три блока описывают стили для элементов с атрибутом .

Первая часть устанавливает, что элементы будут относительными по положению. Это нужно, чтобы псевдоэлемент мог позиционироваться относительно этих элементов.

[data-tooltip]::after

Вторая часть создает псевдоэлемент , который будет отображать текст подсказки. Он получает значение из атрибута с помощью функции . Псевдоэлемент позиционируется абсолютно, чтобы появляться над элементом, и имеет стили для фона, цвета текста, отступов и скругления углов. Изначально он невидим , и не реагирует на события мыши .

[data-tooltip]:hover::after

Третья часть определяет стили для псевдоэлемента при наведении на родительский элемент. Когда пользователь наводит курсор на элемент, псевдоэлемент становится видимым и смещается немного выше , чтобы создать эффект всплывания.

Пример использования

И теперь остается добавить к элементу, который должен показывать подсказку при наведении.

<button data-tooltip="Подсказка!">Кнопка с подсказкой</button>

index.html

А это абзац текста тоже с подсказкой. Я не знаю, где такое может пригодится, но параметр data-tooltip можно применять к любым HTML элементам.

🤫🤩🤖