Настройка всплывающей подсказки HTML при наведении курсора с помощью CSS

Настройка всплывающей подсказки HTML при наведении курсора с помощью CSS

В этом руководстве мы создадим простую всплывающую подсказку с использованием HTML и CSS без использования JavaScript.

Начнем с разметки HTML:

<p>Example CSS Tooltip <span data-tooltip="Tooltips are used to provide information about an element on a web page.">i</span></p>

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

Теперь о CSS, начиная с триггерного элемента всплывающих подсказок:

[data-tooltip] {
  position: relative;
  cursor: pointer;
  background: black;
  color: white;
  font-size: 12px;
  border-radius: 1em;
  padding: 0 0.5em;
}

Поскольку мы используем атрибут данных, мы можем использовать [attribute]селектор CSS , который выбирает все элементы с указанным атрибутом ( data-tooltip). Фактическая всплывающая подсказка, которая появляется при наведении курсора, будет построена с использованием псевдоэлементов :before и :after:

[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0; 
  width: 150px;
  transform:translateX(-50%);
  bottom: 25px;
  padding: 0.5em;
  background-color: black;
  border-radius: 0.25em;
  color: white;
  text-align: center;
  transition:0.2s;
}

Затем мы сделаем маленькую стрелку, чтобы всплывающая подсказка выглядела как речевой пузырь:

[data-tooltip]:after {
  content: "";
  position: absolute;
  opacity: 0; 
  bottom: 15px;  
  margin-left: -5px; 
  border: 5px solid black;
  border-color: black transparent transparent transparent;
  transition:0.2s;
}
Code language: CSS (css)
Finally we need to set the opacity to be visible when the tooltip element is hovered:

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  opacity: 1; 
}

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