Создаем удобный тултип на HTML и CSS.

Тултип это сплывающая подсказка при наведении.

Где правильно расположить тултип?
Тултип — это всплывающая подсказка CSS, поэтому она должна быть небольшого размера. Рекомендуют использовать прямоугольную форму до 250 рх по ширине. Обычно в тултипах располагают небольшой текст, поэтому этого размера более чем достаточно.

Правильное расположение тултипа — справа от элемента, к которому он прикреплен. Бывает, что места не хватает, тогда его располагают в следующем порядке по убыванию приоритета:

• Справа;
• Сверху;
• Слева;
• Снизу.

Тултип не должен закрывать важную информацию на странице — от этого тоже может меняться его местоположение.

CSS-код – это своеобразный список инструкций и указаний для браузера, по тому что, где и как отобразить (элементы web-страницы). Элементами - теги XHTML/HTML и их содержимое.

Стиль - набор параметров, задающий внешнее представление объекта. Например, мы хотим, чтобы все заголовки первого уровня теги <h1>) на одной странице имели красный цвет, размер - 19 и были написаны курсивом, а на другой странице чёрного цвета, размера - 10. Заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, то есть они отличаются стилем.

Каждый элемент на странице имеет свой стиль это - параграфы, заголовки, линии и. тд. Набор стилей всех элементов называется таблицей стилей CSS.

---

Пример кода HTML:

 <span class="tooltip">
   <button class="tooltip__btn" aria-describedby="some_id"><Термин</>
 <span class="tooltip__txt" role="tooltip" id="some_id">    
<span class="visually-hidden">Тултип:</span>
 Описание термина
</span>

Пример кода CSS:

 .tooltip {
  position: relative;
}

.tooltip__btn {
  border: none;
  border-bottom: 1px dashed currentColor;
  padding: 0;
  color: #000;
  background-color: transparent;
  cursor: pointer;
}

.tooltip__txt {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 3;
  padding: 20px;
  width: max-content;
  max-width: 370px;
  box-shadow: 0 0 29px rgb(0 0 0 / 32%);
  font-weight: 400;
  font-size: 14px;
  line-height: 200%;
  color: #fff;
  background: #222;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s ease-in-out;
}

.tooltip__btn:hover + .tooltip__txt {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip__btn:focus + .tooltip__txt {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0)
}

В целом простой, и несложный код. Просто делаем блок внутри блока и показываем его. Тут ключевая особенность как раз в методе показа — не только по hover, но и по focus, чтобы с клавиатуры легко «достать» элемент. И тут как раз нам помогает кнопка, которая этот самый фокус по умолчанию имеет.

---

Пример работы тултипа смотрите ниже:

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Наведите курсор на меня Тултип: Пример термина тултип.

Следующий пример тултипа отнесём к рангу уведомлений.
Удобный и простой способ уведомить пользователя на странице сайта о том или ином, объявлении.

код CSS во втором примере будет такой же, а вот html изменится.

Пример кода HTML: (тултип-уведомление)

<span class="tooltip">
   <button class="tooltip__btn" aria-labelledby="warn-tooltip">
 <><use xlink:href="#warn"></use></>   
</button>
   <span class="tooltip__txt" role="tooltip" id="warn-tooltip"<!</span>
</span>

---

Пример работы тултипа (уведомления) смотрите ниже:

Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Уведомление!

Отсутствует текст в кнопке. Он здесь и не нужен, при фокусе нужно сразу читать содержимое тултипа.

(!) Аналогичный приём с всплывающей подсказкой при наведении курсора на ссылку можно посмотреть На этой странице.

---

  На этом уроке мы рассмотрели лишь два варианта тултипа "термин" и" уведомления".

 

Создано 20.02.2020. |Обновлено: 23.02.2023.