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

CSS-tooltip

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

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

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

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