Поява підказки при кліці без скриптів
Розглянуті до цього tooltip-механізми реагували на наведення курсору миші на цільовий елемент і ґрунтувалися на CSS-псевдоклассе :hover. У деяких ситуаціях краще відкривати підказку при кліці. Подібний ефект легко реалізувати на JavaScript, однак і CSS може впоратися з поставленим завданням.
Серед списку псевдокласів CSS є чудовий клас :focus, доступний для посилань і введення елементів. На відміну від :hover, яка зникає одразу, як йде курсор миші, цей псевдоклас дозволяє зберігати стан активності цільового елемента. І якщо поля введення семантично не дуже підходять для створення екранної підказки, посилання цілком годяться.
Замінимо елемент списку з першого прикладу на посилання:
Проксима Центавра
Проксима Центавра (від лат. proxima — найближча) — червоний карлик, що відноситься до зоряній системі Альфа Центавра, найближча до Землі зірка після Сонця.
Атрибут href зі значенням javascript:void(0) необхідний для того, щоб запобігти будь-яку реакцію браузера на натискання посилання.
Наступні стилі дозволять викликати підказку з описом зірки по кліку:
.star .tooltip {
display: none;
}
.star:focus .tooltip {
display: block;
}
Посилання буде зберігати фокус до тих пір, поки користувач не зробить клік в будь-якому місці сторінки.
Отже, tooltip на сайті може бути створений різними способами, навіть без використання JavaScript. Кожен з них хороший, потрібно лише вибрати найбільш підходящий для конкретної ситуації.
