Русский
Українська
English
Доброго времени суток уважаемый пользователь, сегодня я хотел бы поговорить о том как можно создать всплывающие подсказки в тексте с использованием CSS , ну и создать несколько примеров.
И так что такое "всплывающие подсказки" - это текст или картинка которые отображаются при наведении указателя мыши на ссылку или другой какой то элемент на странице, если в атрибуте title есть ее описание.
Всплывающую подсказку Вы можете применять как для ссылок, так и для любых изображений.
В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:
И выводится она стандартным системным методом при помощи атрибута title, без оформления код ссылки из всплывающей подсказкой выглядит так:
|
1 |
<a title="Всплывающая подсказка" href="http://site.ru/">Ссылка</a> |
Но как мы уже говорили изначально мы будем делать эти всплывающие подсказки более симпатичными ,и будем использовать код css, сегодня мы постараемся рассмотреть три варианта всплывающих подсказок.
Так как, нет возможности в CSS простого оформления title, потому мы будем добавлять разные атрибуты, писать для них оформление и соответственно добавлять их в код нашей ссылки или изображения, для которого мы делаем красивую всплывающую подсказку.
Вариант всплывающей подсказки первый, в нем мы будем добавлять подсказку на фотографию в самом низу при наведении указателя мыши.
Для выполнения данного действия мы будем использовать два атрибута: 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; /* Параметры рамки */ } |
Ну и сам HTML код выглядит так:
|
1 |
<div class="image" data-text="Текст подсказки"><img src="путь к изображению" alt="" /></div> |
А вот примерно такой результат у нас получится:
Но для ссылок такой вариант всплывающей подсказки не подойдет конечно же ,значить будем использовать немного другие методы вывода нашей подсказки. И в первом методе мы выведем всплывающую подсказку именно над нашей ссылкой.
Пример кода CSS Ниже:
|
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; } |
А для нашей ссылки с подсказкой делаем такой код:
|
1 |
<a class="podskazka" title="Текст нашей подсказки." href="https://web-stydia.com/">Ссылка</a> |
Ну и результат у нас получится такой:
Наведи курсор сюда
Ну и последний третий вариант - Выводить нашу всплывающую подсказку будем под ссылкой, в принципе он похож на предыдущий но немного другой дизайн и вывод под ссылкой.
Пример CSS кода:
|
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; } |
Ну и соответственно html-код для ссылки:
|
1 |
<span class="tooltip">Ссылка<span class="classic">Текст всплывающей подсказки</span></span> |
И результат у Вас должен будет получится как на примере ниже:
Наведи курсор сюдаТекст всплывающей подсказки
Вот мы и рассмотрели три варианта всплывающих подсказок,вроде ничего сложного но наши всплывающие подсказки уже имеют более красивый вид чем изначально, их конечно же в сети намного больше можно найти и это только малая часть примеров, по этому пробуйте и комментируйте.
Нет комментариев
Вы можете оставить комментарий первым.