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

Tooltip на чистому HTML

Можливість створення підказок закладена в самій мові гіпертекстової розмітки веб-сторінок. Спочатку вона призначалася для розшифровки абревіатур і складних наукових термінів.

Щоб створити такий спливаючий блок, потрібно атрибут title, доступний для будь-якого HTML-тега.

Проксима Центавра розташована приблизно в 4,22
світлового року
від Землі, що в 270 тис. разів більше відстані від Землі до Сонця.


Головні переваги контекстної підказки на HTML: простота застосування і можливість використовувати з будь-якими елементами верстки – від тексту до зображень. Але є у неї і великі недоліки:

  • не можна форматувати текст;
  • занадто простий зовнішній вигляд, який не можна змінити;
  • відсутність можливості вставки зображень.
Цікаве:  Як перевстановити Windows 7: покрокова інструкція

HTML-атрибут title підходить лише для невеликих підказок, що не вимагають особливого оформлення. В інших випадках корисно знати, як зробити спливаючі підказки за допомогою CSS.