CSS -подсказка

Создавайте всплывающие подсказки с помощью CSS.

Демонстрация: примеры подсказок

Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:

Основная подсказка

Создайте всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:

Объяснение примера

HTML: используйте элемент-контейнер (например, <div>) и добавьте к "tooltip"нему класс. Когда пользователь наведет курсор на этот <div>, он покажет текст всплывающей подсказки.

Текст всплывающей подсказки помещается внутри встроенного элемента (например, <span>) с расширением class="tooltiptext".

CSS: класс tooltipиспользует position:relative, который необходим для позиционирования текста всплывающей подсказки ( position:absolute). Примечание. Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptextсодержит фактический текст всплывающей подсказки. По умолчанию он скрыт и будет виден при наведении (см. ниже). Мы также добавили к нему несколько основных стилей: ширина 120 пикселей, черный цвет фона, белый цвет текста, текст по центру и отступы по 5 пикселей сверху и снизу.

Свойство CSS border-radiusиспользуется для добавления закругленных углов к тексту всплывающей подсказки.

Селектор :hoverиспользуется для отображения текста всплывающей подсказки, когда пользователь наводит указатель мыши на <div> с помощью class="tooltip".

Подсказки по позиционированию

В этом примере всплывающая подсказка размещается справа ( left:105%) от «наводимого» текста (<div>). Также обратите внимание, что top:-5pxиспользуется для размещения его в середине элемента-контейнера. Мы используем число 5 , потому что текст всплывающей подсказки имеет верхний и нижний отступы по 5 пикселей. Если вы увеличиваете его отступ, также увеличьте значение topсвойства, чтобы оно оставалось посередине (если вы этого хотите). То же самое применимо, если вы хотите, чтобы всплывающая подсказка располагалась слева.

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, см. примеры ниже. Обратите внимание, что мы используем margin-leftсвойство со значением минус 60 пикселей. Это нужно для того, чтобы центрировать всплывающую подсказку над/под наводимым текстом. Он равен половине ширины всплывающей подсказки (120/2 = 60).

Стрелки всплывающей подсказки

Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте «пустое» содержимое после всплывающей подсказки с классом псевдоэлемента ::afterвместе со content свойством. Сама стрелка создается с помощью границ. Это сделает всплывающую подсказку похожей на речевой пузырь.

В этом примере показано, как добавить стрелку в нижнюю часть всплывающей подсказки:

Объяснение примера

Поместите стрелку внутри всплывающей подсказки: top: 100%поместит стрелку в нижнюю часть всплывающей подсказки. left: 50%будет центрировать стрелку.

Примечание . Свойство border-widthопределяет размер стрелки. Если вы измените это, также измените margin-leftзначение на то же самое. Это позволит держать стрелку в центре.

Используется border-colorдля преобразования содержимого в стрелку. Мы устанавливаем верхнюю границу черной, а остальные — прозрачными. Если бы все стороны были черными, у вас получился бы черный квадрат.

В этом примере показано, как добавить стрелку вверху всплывающей подсказки. Обратите внимание, что на этот раз мы установили цвет нижней границы:

В этом примере показано, как добавить стрелку слева от всплывающей подсказки:

В этом примере показано, как добавить стрелку справа от всплывающей подсказки:

Исчезновение всплывающих подсказок (анимация)

Если вы хотите, чтобы текст всплывающей подсказки исчезал, когда он вот-вот станет видимым, вы можете использовать transitionсвойство CSS вместе со opacity свойством и перейти от полностью невидимого к 100% видимости за определенное количество секунд (1 секунда в нашем пример):