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

Часть раздела Практический фронтенд путешествия по 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 с подсказкой, которая появляется, когда пользователь наводит указатель на кнопку "Help". Ваша задача:

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

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

<!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>