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

Tooltip может использоваться для различных целей:

  1. Пояснение: Он может содержать дополнительное пояснение или контекстную информацию об элементе интерфейса, помогая пользователям лучше понять его назначение или функциональность.
  2. Подсказка: Tooltip может давать пользователю подсказки о том, как использовать определенную функцию или элемент интерфейса.
  3. Проверка: Он может использоваться для проверки состояния элемента, например, отображая текущее значение или статус.
  4. Уточнение: Tooltip может предоставлять дополнительные детали или информацию, которая не помещается в основном интерфейсе из-за ограниченного пространства.
<style>
    [data-tooltip] {
      /* Относительное позиционирование */
      position: relative; 
    }

    /* Выводим треугольник */
    [data-tooltip]:hover::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
      width: 0px;
      height: 5px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #3989c9;
    }

    /* Выводим саму подсказку */
    [data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      width: 400px;
      left: 0;
      top: 35px;
      background: #3989c9;
      color: #fff;
      padding: 0.5em;
      border-radius: 5px;
    }
 </style>

<body>
    <p>Текст до строки.</p>
    <p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">Наведи сюда курсор.</p>
    <p>Текст после строки.</p>
</body>
Пример вывода подсказки tooltip

Вот как это работает:

  1. Стиль [data-tooltip] устанавливает позиционирование элемента, к которому будет привязываться подсказка. Такой селектор удобен тем, что можно достать данные напрямую из html-атрибута.
  2. При наведении курсора на элемент [data-tooltip], с помощью селектора ::before создается треугольник, который указывает на место, где будет появляться подсказка. Этот треугольник имеет цвет фона #3989c9.
  3. После этого с помощью селектора ::after создается сама подсказка. Она содержит текст, указанный в атрибуте data-tooltip элемента. Подсказка имеет заданные стили: фоновый цвет #3989c9, белый цвет текста, отступы и скругленные уголки.

Таким образом, данный набор стилей позволяет создавать привлекательные и удобные всплывающие подсказки на веб-странице, что повышает ее интерактивность и удобство использования для пользователей.