Всплывающая подсказка
Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.
Рис. 1. Вид всплывающей подсказки
Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.
Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.
[data-tooltip]::after < content: attr(data-tooltip); /* Выводим текст */ >Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.
[data-tooltip]::after
Там же устанавливаем и время перехода с помощью свойства transition.
[data-tooltip]::after
Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .
[data-tooltip]::after
Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.
[data-tooltip]:hover::after
Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.
Пример 1. Создание подсказки
См. также
- :focus на мобильных устройствах
- attr()
- pointer-events
- transition
- Анимация кнопок при наведении
- Анимация ссылок при наведении
- Атрибут title
- Виды ссылок
- Использование :hover
- Нормальное позиционирование
- Переходы
- Переходы и анимация
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
Всплывающая подсказка на CSS
В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается в использовании JavaScript, но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент , к которому добавляем атрибут data-title с текстом всплывающей подсказки. Есть соблазн вставить атрибут title и задействовать его, но в таком случае будет выводиться одновременно две подсказки: одна «родная», а вторая наша. Так что мы используем свой собственный атрибут data-title , благо HTML5 позволяет это делать. Таким образом получим следующий код (пример 1).
Пример 1. Код HTML
HTML5 IE Cr Op Sa Fx
Всплывающая подсказка на CSS 
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .
.photo::after
Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .
.photo:hover::after
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5 CSS3 IE Cr Op Sa Fx
Всплывающая подсказка на CSS Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5 CSS3 IE Cr Op Sa Fx
Всплывающая подсказка на CSS Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.
CSS по теме
- content
- Псевдокласс :hover
- Псевдоэлемент :after
Как добавить всплывающую подсказку к тексту?
Всплывающая подсказка — это небольшой блок с текстом, который появляется при наведении курсора мыши на какой-либо элемент веб-страницы (рис. 1). Подсказка чаще всего используется для вывода дополнительной информации об элементе, на который указывает курсор. Как только курсор убирается с элемента, исчезает и сама подсказка.
Рис. 1. Вид всплывающей подсказки
Самый простой способ сделать такую подсказку — это добавить к нужному элементу атрибут title с желаемым текстом (пример 1).
Пример 1. Использование атрибута title
Диамат — материалистическая интерпретация диалектики Гегеля.
Атрибут title выводит подсказку, вид которой задаётся браузером, и не может быть изменён через CSS. Чтобы сделать подсказку со своим собственным стилем, надо к элементу добавить пользовательский атрибут (такие атрибуты начинаются на data- , например, data-title ) и уже для него задать свой стиль.
Стиль самого элемента определяется с помощью селектора [data-title] , он выбирает все те элементы, у которых есть пользовательский атрибут data-title .
Для самого элемента устанавливаем относительное позиционирование через свойство position. Оно нужно, чтобы в дальнейшем управлять положением подсказки относительно текста. Также дополнительно можно поменять вид курсора мыши.
[data-title] < position: relative; /* Относительное позиционирование */ cursor: help; /* Меняем курсор на справочный */ >Вывод подсказки делаем через псевдоэлемент ::after (или ::before, что в данном случае равнозначно), который добавляется к нашему селектору [data-title] . Чтобы вывести текст из значения атрибута, используем свойство content со значением attr(data-title) .
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ >Теперь надо настроить положение подсказки и её стиль. Для этого делаем её абсолютно позиционированной, что в сочетании с относительным положением у родителя позволяет настраивать положение псевдоэлемента. К примеру, чтобы вывести подсказку ниже текста ставим ей свойство top со значением 1em .
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Подсказка снизу */ >Чтобы вывести подсказку выше текста, меняем свойство top на bottom.
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; bottom: 1em; /* Подсказка снизу */ >Учтите, что если нет свободного места для подсказки, то она может быть выведена за пределами окна браузера.
Осталось задать остальной стиль подсказки (цвет, фон и др.) и спрятать её через свойство opacity.
[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Положение подсказки */ opacity: 0; /* Скрываем подсказку, делая её прозрачной */ >Для отображения подсказки применяем псевдокласс :hover, добавляя его к нашему селектору. Внутри используем единственное свойство opacity .
[data-title]:hover::after < opacity: 1; /* Показываем подсказку */ >Окончательный под показан в примере 2.
Пример 2. Использование пользовательского атрибута
Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.
См. также
- :focus на мобильных устройствах
- content
- opacity
- quotes
- relative и absolute
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибут title
- Атрибуты ссылок
- Виды ссылок
- Всплывающая подсказка
- Добавление тени
- Использование :hover
- Не только текст
- Нормальное позиционирование
- Очистка float
- Переходы с помощью :hover
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
Всплывающее окно при наведении на объект(картинку, текст и т.д.) CSS
Сейчас я вам покажу как сделать на картинке или другом объекте всплывающий текст(подсказку). как показано на картинке. Все очень просто. Для начала HTML код ниже я расскажу что там и как.
Создаем сам объект на который мы должны навести мышь, в нашем случае это ссылка. Внутри ссылки создаем div с классом overlay внутри которого должна вылезти подсказка и рядом текст самой ссылки. Я думаю это все понятно. Теперь перейдем к CSS.
.overlay < display:none; position: absolute; >a:hover .overlay
Объясняю что в CSS. класс Overlay делаем по умолчанию не видимым display:none. Потом чтобы класс не вылезал где попало а появлялся там где нам надо устанавливаем абсолютное позиционирование и заливаем цветом с полупрозрачностью. Параметры с цветом фона и текста и прочего носят лишь декоративный оттенок и являются необязательными.
И последнее создаем параметр для ссылки (тег a) с указанием hover(При наведении мыши) и классу overlay меняем display на блочный элемент
Результат можете посмотреть на ссылке