Создаем удобный, доступный и рабочий тултип

Что такое тултип?

Тултип — это всплывающее уведомление, как правило работающее по наведению или по клику. Часто Тултип: Часто — значит почти всегда)) можно увидеть в интернет-магазинах. И на слове «часто» на этой странице вы тоже можете увидеть тултип.

Казалось бы все просто — сделай див в диве да по ховеру покажи внутренний див и все. Но не тут то было. Давайте разбираться.

Что нужно для правильного тултипа?

Делать исключительно див в диве нельзя, так как это будет крайне недоступно. Пользователи с ограниченными возможностями просто не смогут никак узнать информацию из тултипа, прочесть ее и понять что в ней. Мы должны им помочь, и это делается стандартными средствами html — с помощью aria-атрибутов Тултип: Атрибуты, помогающие расширить привычные возможности HTML в план доступности. Добавляют специальные описания и т.д. .

Ну вот и представье, что на сайт заходит незрячий человек. Он не сможет никак навестись мышкой на тултип, значит ему нужно альтернативное действие. И оно есть — состояние :focus. Так, он сможет лишь с клавиши tab попасть на любой интерактивный элемент страницы, и тултип мы должны сделать таковым.

HTML

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

Итак, что же здесь:

• У нас есть спан-родитель с классом .tooltip для того, чтобы удобно относительно него располагать сам тултип.
• Внутри два элемента — кнопка, открывающая тултип, а также спан с текстом — описанием.
• Кнопка и спан связаны между собой засчет атрибута aria-describedby и id. Тут мы просто говорим, что хотим по действию на кнопку услышать то, что в спане, если грубо говоря.
• У тултипа есть специальный атрибут role со значением tooltip. Это позволяет превратить наш обычный спан-элемент в доступный тултип-элемент.
• Еще внутри тултипа есть спан с текстом Тултип:. Это для того, чтобы экранная читалка явно сказала пользователю, что он слышит содержимое тултипа.

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)
}

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

Вот так делается тултип с описанием. Их примеры есть в текущей статье, а также иногда будут встречаться и в иных моих статьях. А теперь давайте к тултипу-уведомлению. CSS там будет тот же, а вот html другой.

HTML (тултип-уведомление)

<span class="tooltip">
  <button class="tooltip__btn" aria-labelledby="warn-tooltip">
    <svg><use xlink:href="#warn"></use></svg>
  </button>
  <span class="tooltip__txt" role="tooltip" id="warn-tooltip">Уведомление!</span>
</span>

В сущности, тут все тоже самое, кроме пары нюансов:

• Отсутствует текст в кнопке. Он и не нужен, при фокусе нужно сразу читать содержимое тултипа.
• aria-describedby поменялся на aria-labelledby. Это как раз и меняет работу тултипа.

Теперь вместо того, чтобы читать сам термин и его расшифровку, тултип просто будет о чем-то уведомлять пользователя. Удобно)

Надеюсь, вам все было понятно. Рекомендую также ознакомиться со статьей: ссылка.

Ну и увидимся еще. Удачи!