CSS подсказке

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

Демо-версия: Tooltip Примеры

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

Основные подсказке

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

Пример Разъяснения

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

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

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

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

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

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

Позиционирование Tooltips

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

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

Tooltip Стрелки

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

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

Пример Разъяснения

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

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

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

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

Этот пример демонстрирует, как добавить стрелку слева от подсказке:

Этот пример демонстрирует, как добавить стрелку справа от подсказке:

Fade в подсказках (анимация)

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

Примечание: Вы узнаете больше о переходах и анимации позже в нашем учебнике.