Всплывающие подсказки

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 23 из 35.

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

Давайте создадим простую всплывающую подсказку, используя HTML и CSS:

Сначала создайте структуру HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

Затем добавьте CSS для позиционирования и отображения/скрытия подсказки:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Позиционирование подсказки */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Добавление небольшой задержки перед отображением */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Показать подсказку при наведении на контейнер */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

С этим кодом при наведении курсора на кнопку над ней появится подсказка.

Задание

Легко

Вам дана HTML-кнопка с подсказкой (tooltip), которая появляется, когда пользователь наводит курсор на кнопку "Help". Ваша задача:

Скрыть подсказку по умолчанию.
Добавить цвет фона и цвет текста, чтобы она выделялась.
Центрировать текст внутри подсказки.
Добавить внутренние отступы (padding), чтобы подсказка выглядела лучше.
Закруглить углы с помощью border-radius.

Шпаргалка

Подсказки — это небольшие информативные всплывающие элементы, которые появляются при наведении курсора на элементы интерфейса.

Базовая структура HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

CSS для позиционирования и отображения/скрытия подсказок:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>