Спливаюча підказка з допомогою CSS: покрокова інструкція та способи видалення

Додаткова інформація на веб-сайтах часто розміщується у вигляді спливаючих підказок при наведенні, наприклад для розшифрування складних абревіатур або уточнення дій користувача. Подібне інтерфейсне рішення називається tooltip. Воно економить місце на сторінці, дозволяючи показувати тільки основні дані, але залишаючи читачеві можливість ознайомитися з доповненнями при необхідності. Крім суто інформаційної функції, спливаючі підказки можуть бути важливими елементами дизайну, підкреслюють загальний стиль сайту і привертають увагу.

Поведінка блоку підказки

Елемент, взаємодія з якими викликає появу підказки, називається цільовим.

У спливаючих блоках зазвичай розміщується важлива, але не основна інформація. Передбачається, що користувач повинен ознайомитися з нею, тільки якщо сам захоче. Щоб не дратувати, не заважати і не відволікати від головного контенту, підказка повинна відповідати ряду вимог:

  • Плавне поява. Випадкове наведення курсору на цільовий елемент не повинно супроводжуватися різким вистрибуванням підказки. Це ще може бути прийнятним для маленьких текстових блоків, але категорично не підходить, якщо tooltip великий або містить зображення.
  • Адекватне розміщення. Вікно підказки не повинно закривати той контент, який вона пояснює, щоб користувач мав можливість зіставити дані. У тих випадках, коли tooltip має переважно декоративне значення, це допустимо.
  • Відсутність впливу на інший контент. Спливаючі підказки покликані бути маленькими, ледь помітними помічниками користувача, тому вони не повинні створювати незручності. Правильний tooltip не зрушує сусідні блоки і не виходить за межі сторінки, створюючи смуги прокручування.
  • Видимість. Підказку повинно бути видно, вона не повинна перекриватися іншими елементами або ховатися за краєм вікна браузера.
  • Легкість управління. Важливо, щоб користувач інтуїтивно розумів, як викликати і прибрати спливаючі підказки, і не відчував труднощів з цими діями.
Цікаве:  Основні формати. Як змінити формат відео