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

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

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

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

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


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

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

Tooltip на чистому HTML

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

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

<p>
Проксима Центавра расположена примерно в 4,22
<i title=""9 460 730 472 580 800 метров"">светового года</i>
от Земли, что в 270 тыс. раз больше расстояния от Земли до Солнца.
</p>
<img title=""Замок Нойшванштайн"" src="/"disney.jpg"">

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

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

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


CSS-tooltip

Можна створити гарний блок підказки за допомогою каскадних таблиць стилів. При цьому використовуються базові концепції CSS:

  • абсолютне позиціонування - для висмикування підказки із загального потоку документа;
  • повне приховування блока у неактивному стані за допомогою властивості display;
  • псевдоклас :hover, який присвоюється будь-якому елементу, що знаходиться під курсором миші;
  • псевдоелементи :before і :after, які можна використовувати для простих підказок, щоб не створювати окремий HTML-елемент;
  • анімація і плавна зміна властивостей для красивих ефектів появи і зникнення.

Всі ці властивості добре підтримуються сучасними браузерами, що забезпечує надійну роботу tooltip-механізму.

Псевдоклас :hover, крім наведення курсора, реагує також на дотики пальця до сенсорного екрану, що дозволяє підтримувати мобільні гаджети.

Блок або псевдоелемент

CSS-tooltip може бути як окремим HTML-блоком з власною структурою, так і псевдоелементом іншого блоку. Кожен з цих варіантів має свої плюси і мінуси, які слід враховувати.

У окремому контейнері набагато простіше маніпулювати контентом. У ньому можна розмістити зображення, заголовки та інші елементи.

Псевдоелемент дозволяє позбутися зайвих блоків і зробити верстку трохи легше. Текстовий контент можна розмістити в атрибуті цільового елемента і не дбати про створення самої підказки, все зробить CSS. Однак псевдоелемент погано підходить для блоку зі складною структурою. Крім того, він може бути створений тільки для тегів, що закриваються. Не можна причепити таку підказку безпосередньо до зображення.

Створення спливаючого блоку на CSS

Створимо красиво оформлений tooltip зі складною структурою для найближчої до нас зірки із сузір 'я Центавра.


Перш за все, визначимося з HTML-розміткою:

<h2>Звезды созвездия Центавра</h2>
<ul class=""stars"">
  <li class=""star"">Альфа Центавра</li>
  <li class=""star"">Бета Центавра</li>
  <li class=""star"">Тета Центавра</li> 
  <li class=""star"">Гамма Центавра</li>
  <li class=""star"">Эпсилон Центавра</li>
  <li class=""star"">
    Проксима Центавра
    <div class=""tooltip"">
      <img src="/"proxima.jpg"">
      Про́ксима Цента́вра (от лат. proxima — ближайшая) — красный карлик, относящийся к звездной системе Альфа Центавра, ближайшая к Земле звезда после Солнца.
    </div>
  </li>
</ul>

Оформимо і скриємо блок підказки за допомогою CSS:

.star {
  position: relative;
}
/* стили для всплывающей подсказки */
.star .tooltip {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
}
/* стили для декоративного треугольничка */
.star .tooltip:before { ... }
/* появление подсказки при наведении */
.star:hover .tooltip { display: block; }
 

Стилі списку і підказки можуть бути будь-якими, для короткості вони пропущені.


Розташування спливаючої підказки в окремому блоці дозволяє використовувати всередині неї зображення, форматувати текст і навіть створювати псевдоелементи для красивого вигляду.

Підказка у псевдоелементі

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

HTML-код панелі виглядатиме так:

<div class=""instruments"">
  <div class=""instrument"" data-tooltip=""Кисть"">
    <img src="/"brush-icon.svg"">
  </div>
  <div class=""instrument"" data-tooltip=""Заливка"">
    <img src="/"color-fill-icon.svg"">
  </div>
  <div class=""instrument"" data-tooltip=""Увеличение масштаба"">
    <img src="/"zoom-in-icon.svg"">
  </div>
  <div class=""instrument"" data-tooltip=""Уменьшение масштаба"">
    <img src="/"zoom-out-icon.svg"">
  </div>
</div>

Унікальна назва інструмента розміщується в атрибуті data-tooltip. Всередині блоку знаходиться іконка, але сама спливаюча підказка в HTML-коді відсутня.


Оскільки tooltip буде містити лише короткий пояснюючий текст, можна скористатися псевдоелементами, щоб не захаращувати легку панель.

/* общие стили для иконки */
.instrument {
  position: relative;
  color: #666;
  background: white;
 
  cursor: pointer;
}
/* стили для иконки при наведении */
.instrument:hover {
  background: #666;
  color: white;
}
/* стили для подсказки */
.instrument:hover:after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
 
  color: #666;
}

Псевдоелемент з 'являється тільки при наведенні курсора, тому немає необхідності приховувати його за допомогою display: block. Його розташування регулюється властивостями position і left/right/top/bottom. Для отримання з атрибута data-tooltip цільового елемента контенту спливаючої підказки CSS надає функцію attr(). Декоративні стилі для короткості опущені.

Поява підказки при кліці без скриптів

Розглянуті до цього tooltip-механізми реагували на наведення курсора миші на цільовий елемент і ґрунтувалися на CSS-псевдокласі :hover. У деяких ситуаціях краще відкривати підказку при кліці. Подібний ефект легко реалізувати на JavaScript, однак і CSS може впоратися з поставленим завданням.

Серед списку псевдокласів CSS є чудовий клас :focus, доступний для посилань і елементів вводу. На відміну від :hover, який зникає відразу, як йде курсор миші, цей псевдоклас дозволяє зберігати стан активності цільового елемента. І якщо поля вводу семантично не дуже підходять для створення спливаючої підказки, посилання цілком годяться.


Замінимо елемент списку з першого прикладу на посилання:

<a class=""star"" href="/"javascript:void(0)"">
  Проксима Центавра
  <div class=""tooltip"">
      <img src="/"proxima.jpg"">
      Про́ксима Цента́вра (от лат. proxima — ближайшая) — красный карлик, относящийся к звездной системе Альфа Центавра, ближайшая к Земле звезда после Солнца.
   </div>
</a>
  

Атрибут href зі значенням javascript:void(0) необхідний для того, щоб запобігти будь-якій реакції браузера на натискання посилання.

Наступні стилі дозволять викликати підказку з описом зірки за кліком:

.star .tooltip {
  display: none;
}
.star:focus .tooltip {
  display: block;
}

Посилання буде зберігати фокус до тих пір, поки користувач не зробить клік в будь-якому місці сторінки.

Отже, tooltip на сайті може бути створений різними способами, навіть без використання JavaScript. Кожен з них хороший, потрібно лише вибрати найбільш відповідний для конкретної ситуації.