CSS-подсказка

В этой статье мы расскажем, как создавать подсказки с помощью HTML и CSS.

Подсказка появляется при наведении курсора на указанный элемент. Сначала рассмотрим следующие четыре примера:

Базовая подсказка

Подсказка отображается при наведении курсора на указанный элемент:

Анализ примера

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

Поместите текст всплывающей подсказки в строчный элемент (например, <span>) и используйтеclass="tooltiptext"。

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

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

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

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

Всплывающая подсказка с позиционированием

В следующем примере всплывающая подсказка отображается справа от указанного элемента (left:105%) 。

Примечаниеtop:-5pxЭто то же самое, что позиционирование по центру элемента-контейнера. Используйте число5Поскольку верхний и нижний отступ текста всплывающей подсказки равен 5px.

Если вы изменяете значение padding, значение top также следует изменить соответствующим образом, чтобы гарантировать выравнивание по центру.

Тот же принцип применяется, когда подсказка отображается с левой стороны.

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

Добавить стрелку

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

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

Анализ примера

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

Примечание:border-widthСвойство задаёт размер стрелки. Если вы измените его, вам также нужно изменитьmargin-leftзначение. Так стрелку можно центрировать.

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

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

Следующие два примера — это примеры стрелок для левой и правой сторон:

Эффект плавного появления

Мы можем использовать свойство transition CSS3 и свойство opacity, чтобы добиться эффекта плавного появления для всплывающей подсказки:

Другие примеры

Красивая всплывающая подсказка на CSS