Создаем удобный, доступный и рабочий тултип (tooltip) с помощью CSS

Описание

Привет! Тултип (tooltip) - всплывающая подсказка на сайте. Их часто можно встретить при верстке интернет-магазина, если нужно скрыть какой-то контент и показывать по наведению. Но не все знают, как верно его делать, и почему.
В этом видео я рассмотрю три варианта создания тултипа - простой, но недоступный, посложнее, но доступный, и с помощью Js.
Разберемся, какой лучше и почему, и нужен ли вообще тут js. Поехали!

Извиняюсь за эхо на вставках скринридера(

Содержание:
00:00 - Вступление
01:10 - Первый вариант (простой)
07:27 - Второй вариант (сложнее)
12:47 - Третий вариант (через js)
19:00 - Итоги: что использовать

https://github.com/maxdenaro/maxgraph-youtube-source/tree/master/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B5%D0%BC%20%D1%83%D0%B4%D0%BE%D0%B1%D0%BD%D1%8B%D0%B9%2C%20%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D1%8B%D0%B9%20%D0%B8%20%D1%80%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%82%D1%83%D0%BB%D1%82%D0%B8%D0%BF - исходники видео на GitHub
https://inclusive-components.design/tooltips-toggletips/ - Хорошая статья про создание тултипов доступными
https://popper.js.org/ - js-библиотека для создания тултипов
http://apps.eky.hk/css-triangle-generator/ - генератор треугольников :)

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat


#обучение #tooltip #css