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

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

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

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

Делать исключительно див в диве нельзя, так как это будет крайне недоступно. Пользователи с ограниченными возможностями просто не смогут никак узнать информацию из тултипа, прочесть ее и понять что в ней. Мы должны им помочь, и это делается стандартными средствами html — с помощью Тултип: Атрибуты, помогающие расширить привычные возможности 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&nbsp;/ 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. Это как раз и меняет работу тултипа.

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

Надеюсь, вам все было понятно. Рекомендую также ознакомиться со статьей: ссылка, а также посмотреть видео (в начале статьи) и примеры на гитхаб (ссылка в конце статьи).

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