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

Сегодня мы будем создавать всплывающие подсказки на CSS. Всплывающие подсказки — это то, что можно увидеть при наведении курсора, например на ссылку, если в атрибуте title содержится ее описание.

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

В неоформленном виде всплывающая подсказка выглядит вот так:

Всплывающая подсказка выводится стандартным системным методом с помощью атрибута title.
Стандартный код ссылки с всплывающей подсказкой без оформления:

Ссылка

Всплывающая подсказка CSS

Придать оформление всплывающей подсказке можно с помощью CSS. Мы разберем три варианта всплывающей подсказки на CSS .

К сожалению, нет CSS-«рецепта» в отношении оформления title, поэтому придется добавлять дополнительные атрибуты, прописывать для них оформление и добавлять их в код ссылки/изображения, для которого мы хотим сделать красивую всплывающую подсказку CSS .

В первом примере мы сделаем всплывающую подсказку CSS поверх изображения в самом низу.

Для этого мы будем использовать два атрибута: image, а для того, чтобы всплывающая подсказка работала, — ::after и data-text для вывода текста всплывающей подсказки.

CSS-стили для данного примера:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.image { display : inline-block ; position : relative ; } .image : hover :: after { content : attr (data-text) ; /* Выводим текст всплывающей подсказки*/ position : absolute ; left : 0 ; right : 0 ; bottom : 0px ; /* Положение всплывающей подсказки */ z-index : 1 ; /* Отображаем подсказку поверх других элементов */ background : rgba (0 , 255 , 102 , 0.6 ) ; /* Цвет (RGB) и степень его прозрачности */ color : #fff ; /* Цвет текста */ text-align : center ; /* Выравниваем текст по центру */ font-family : Arial, sans-serif ; /* Гарнитура шрифта */ font-size : 11px ; /* Размер текста подсказки */ padding : 5px 10px ; /* Поля */ border : 1px solid #333 ; /* Параметры рамки */ }

Image { display: inline-block; position: relative; } .image:hover::after { content: attr(data-text); /* Выводим текст всплывающей подсказки*/ position: absolute; left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */ color: #fff; /* Цвет текста */ text-align: center; /* Выравниваем текст по центру */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }

Результат:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

.podskazka{ display : inline ; position : relative ; } .podskazka : hover : after { background : #333 ; background : rgba (204 , 102 , 0 , .8) ; border-radius : 5px ; bottom : 26px ; color : #fff ; content : attr (title) ; left : 20% ; padding : 5px 15px ; position : absolute ; z-index : 98 ; width : auto ; } .podskazka : hover : before { /* Добавляем стрелочку внизу блока всплывающей подсказки */ border : solid ; border-color : #cc6600 transparent ; border-width : 6px 6px 0 6px ; bottom : 20px ; content : "" ; left : 50% ; position : absolute ; z-index : 99 ; }

Podskazka{ display: inline; position: relative;}.podskazka:hover:after{ background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;}.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */ border: solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99;}

Ссылка

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

.tooltip { position : relative ; /* Делаем элемент родительским для всплывающих подсказок */ cursor : help ; } .tooltip span { position : absolute ; /* Выводим элемент из потока */ margin-left : -30000px ; /* И прячем далеко за краем экрана */ background-color : rgba (0 , 0 , 153 , .8) ; /* Фон всплывающего блока*/ color : #fafafa ; /* Цвет текста */ padding : 10px ; /* Отступы */ -webkit-border-radius: 5px ; /* Закругляем уголки */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; border-radius : 5px ; } .tooltip : hover span { /* При наведении */ margin-left : 0 ; /* Возвращаем из далекого заэкранного края блок на место */ width : 250px ; /* Задаем ширину */ z-index : 1000 ; /* Помещаем на самый верх */ top : 30px ; /* Отступ сверху */ left : 20px ; /* Отступ слева */ } .tooltip span: after { content : "" ; /* Добавили контент */ width : 0 ; /* Спрятали его, превратив в 0 */ height : 0 ; border-bottom : 10px solid #000099 ; /* Нижним бордером задаем цвет и высоту треугольника */ border-right : 30px solid transparent ; /* Правым - ширину треугольника вправо */ position : absolute ; /* Позиционируем относительно родительского блока */ top : -10px ; left : 10px ; }

Tooltip { position: relative; /* Делаем элемент родительским для всплывающих подсказок */ cursor: help;}.tooltip span { position: absolute; /* Выводим элемент из потока */ margin-left: -30000px; /* И прячем далеко за краем экрана */ background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/ color: #fafafa; /* Цвет текста */ padding:10px; /* Отступы */ -webkit-border-radius: 5px; /* Закругляем уголки */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}.tooltip:hover span { /* При наведении */ margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */ width: 250px; /* Задаем ширину */ z-index: 1000; /* Помещаем на самый верх */ /* Позиционируем относительно родительского блока */ top:30px; /* Отступ сверху */ left:20px; /* Отступ слева */ }.tooltip span:after{ content: ""; /* Добавили контент */ width:0; /* Спрятали его, превратив в 0 */ height:0; border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */ border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */ position: absolute; /* Позиционируем относительно родительского блока */ top:-10px; left:10px;}

На этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом CSS . Точно такой же принцип можно применить к картинке. Перейдите для просмотра демо страницы .

HTML разметка

Создадим список из пяти пунктов. Внутри каждого пункта поместим тег i с нужной иконкой, просто скопировав код конкретной иконки с сайта Font Awesome .

Под тегом иконки пропишем тег span с соответствующим коротким текстом-подсказкой.

Удобные номера

Кредитные карты

Душ в номере

Завтрак включен

Питомцы OK

После этого подключаем файл стилей - style.css . Меняем положение иконок из вертикального положения в горизонтальное.

Для этого родительскому контейнеру прописываем значение - flex .

Ul {
display: flex;
}

Раскрашиваем фоновую основу под иконками и цвет самих иконок.

Ul li {
background: #cecfcf;
color: #fff;
}

Размер иконки задается через размер шрифта.

Ul li {
font-size: 40px;
}

Внешний вид иконочного ряда уже сформирован.

При наведении курсора на иконку, меняется цвет иконки и вид курсора.

Ul li:hover {
color: #03a9f4;
cursor: pointer;
}

Всплывающая подсказка

При наведении на иконку, будет всплывать текстовая подсказка в прямоугольном блоке, в HTML разметке - это текст в теге span . Расположим подсказки выше иконок.

Ul li span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
}

Размеры боксов зададим следующие фиксированные размеры.

Ul li span {
width: 120px;
height: 24px;
}

Выравнивание текста по центру по вертикали и горизонтали.

Ul li span {
line-height: 24px;
text-align: center;
}

Цвет фона, текста и размер текста.

Ul li span {
background: #03a9f4;
color: #fff;
font-size: 14px;
}

Скругляем углы на 4 пикселя и делаем плавный переход при наведении.

Ul li span {
border-radius: 4px;
transition: .5s;
}

Всплывающая подсказка делается невидимой и прозрачной.

Ul li span {
opacity: 0;
visibility: hidden;
}

Псевдоэлемент::before

Для того, чтобы нарисовать небольшую стрелочку под блоком, мы будем использовать псевдоэлемент ::before , что на практике означает, что стрелочка реально отсутствует в HTML файле (пустой content ), а существует только в CSS файле. Стрелочка с направленным остриём на иконку - не что иное, как фигура квадрата 10x10 пикселей, повёрнутая на 45 градусов и прижатая к блоку span с отрицательным значением. В итоге квадрат трансформирован в треугольник и лежит на слое ниже z-index: -1 , чем его родитель тег span .

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

Посмотреть демо-версию | Скачать исходный код

Мы сможем использовать CSS-подсказки для большинства элементов, таких как ссылки, теги, стилизованный текст и т.д. Нам нужно будет применить к элементу несколько классов и добавить атрибут data- с текстом всплывающей подсказки.

Настройка документа

Нам нужно создать HTML-документ и задать исходную разметку:

Tooltips Demo // контент

Я добавил ссылку на Normalize.css , которая помогает сбросить все стили браузера по умолчанию, и гарантирует, что каждый элемент будет выглядеть одинаково во всех браузерах. В отличие от стандартного сброса CSS Normalize.css не удаляет все стили по умолчанию, так что вам не нужно будет переписывать стиль каждого элемента с нуля.

Я создал div с классом container , в который мы поместим основные примеры всплывающих подсказок HTML . Вот стили для body и класса .container :

body { font-family: "Work Sans", sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; } .container { width: 800px; margin: 100px auto; background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); }

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto . Также добавил несколько стилей для раздела body , чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент . Если браузер не поддерживает CSS-градиенты (это касается в основном IE 8 и 9 ), цвет фона будет переключен обратно на синий по умолчанию (цвет фона раздела body ).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span . Ниже приводится содержимое div контейнера: