Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение, которое не будет загромождать код, будет кроссбраузерним, и в то же время будет очень простым для реализации.
Всех, кого заинтересовал мой способ решения этой простой задачи, прошу под кат.
Всплывающие подсказки Ссылка
Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
Ссылка
Для хранения я использую атрибут data-tooltip.
C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
@import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
$.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.
Вот и все!
В итоге мы получим что-то такое: Демо
Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.
Спасибо за внимание!
Здравствуйте, уважаемые друзья. На днях один из моих заказчиков обратился ко мне с просьбой доработать его сайт. А точнее, сделать новую форму заявки на сайте, так как старая форма сменилась.
А ещё он попросил прикрутить к каждому полю формы всплывающую подсказку. Вы, наверное, такие подсказки видели, когда подводишь курсор мышки на изображение или на слово, то появляется всплывающая подсказка.
Вариантов реализовать такие подсказки, конечно, предостаточно. Я, естественно, ориентируясь на минимизацию нагрузки на сервер, решил сделать всплывающие подсказки с помощью HTML и CSS. Это довольно просто и нисколечко не нагружает сервер.
А вид такой подсказки зависит только от вашего умения и фантазии. В форме заказчика, я реализовал это в виде изображения со знаком вопроса, рядом с полем для ввода, наведя курсор на который появляется подсказка.
Пример реализации всплывающей подсказки
Как создать всплывающею подсказкуИтак, весь процесс займёт у вас не более 5 минут. Для начала нужно определиться, как будет выглядеть объект, привлекающий внимание. То есть это может быть изображение Так выглядит простая всплывающая подсказка, созданная с помощью CSS стилей. И привязанная к изображении. или .
Чтобы привязать всплывающую подсказку к изображению, это изображение нужно сначала , а потом загрузить на ваш сайт. Думаю, останавливаться на этом нет смысла. Далее, в том месте, где хотите вывести это изображении и подсказку соответственно, вставляете это код:
Если же это слово или фраза, то необходимо вставить вот этот код, в том месте, где требуется вывод подсказки.
СЛОВО ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ
Теперь нужно вставить стили в вашу таблицу стилей CSS, в большинстве случаев это файл style.css.
Открываете административную панель WP — «Внешний вид» — «Редактор» — «Таблица стилей» и вставляете в самом конце вот эти стили.
Help { color: #2C8505; outline: none; /*цвет подсказки*/ cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/ position: relative; /*позиция*/ } /*положение всплывающей подсказки*/ .help span { margin-left: -999em; position: absolute; } /*подсказка при наведении курсора*/ .help:hover span { font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/ position: absolute; /*позиция*/ left: 10px; top: 25px; z-index: 99; margin-left: 0; width: 200px; /*ширина блока подсказки*/ } /*параметры изображения*/ .help:hover img { border: 0; } /*блок всплывающей подсказки*/ .airhelp { background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/ border: 1px solid #2b82b8; /*параметры бордюра*/ border-radius: 5px; /*закругление углов*/ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/ color: #fff; /*цвет шрифта всплывающей подсказки*/ padding: 5px; /*внутренний отступ*/ }
Как видите, я сделал для вас подсказки. Вам лишь остаётся сделать изменения под ваш дизайн и можно наслаждаться всплывающими подсказками. А если вашим посетителям приходится что-то заполнять, регистрироваться на сайте или выполнять какие-то действия, то подсказки вам просто необходимы. А ваши посетители будут вам премного благодарны.
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение, которое не будет загромождать код, будет кроссбраузерним, и в то же время будет очень простым для реализации.
Всех, кого заинтересовал мой способ решения этой простой задачи, прошу под кат.
Всплывающие подсказки Ссылка
Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
Ссылка
Для хранения я использую атрибут data-tooltip.
C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
@import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
$.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.
Вот и все!
В итоге мы получим что-то такое: Демо
Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.
Спасибо за внимание!
Подсказки являются отличным способом для вывода дополнительной информации с помощью простого наведения курсора мыши на текст или изображение. Их можно использовать, например, для вывода названий картинок, описания ссылок, или любой другой информации, которая может быть полезна пользователю вашего ресурса. И ломать дизайн шаблон не требуется.
В данном уроке мы рассмотрим, как создать простые подсказки с помощью HTML и CSS, которые будут выводить содержание атрибута title для ссылки.
Зададим базовый стиль для класса tooltip :
Tooltip{ display: inline; position: relative; }
Теперь подсказка будет выводится в одну строку со ссылкой с использованием относительного позиционирования. Теперь определим скругленные углы для блока подсказки и позиционируем ее сверху ссылки:
Tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; }
Мы используем псевдо-класс:hover , который выбирает элемент при наведении на него курсора мыши, и псевдо-класс:after , который добавляет содержание после выбранного элемента. Фон устанавливается частично прозрачным, а для браузеров, которые не поддерживают формат цвета RGBA, устанавливаем серый цвет фона.
Закругленные углы создаются с помощью атрибута border-radius . Цвет текста делаем белым. В завершение, мы позиционируем блок подсказки и добавляем отступ.
Кроме определения стилей и позиционирования задаем свойство content:
Content: attr(title);
Данное свойство позволяет вставлять содержание, которое может быть строкой, или атрибутом элемента. В данном случае используем атрибут title ссылки.
Ссылка на полезный ресурс
Для завершения нужно добавить стрелочку внизу подсказки. Используем псевдо-класс:before и стили для рамки:
Tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }
Для создания стрелки мы использовали трюк с рамкой:устанавливаем цвет рамки слева и справа прозрачным и управляем шириной рамки. Также стрелка позиционируется под подсказкой.
Влад Мержевич
В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается , но в некоторых случаях вполне достаточно обойтись и одним 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 { content: attr(data-title); }
Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .
Photo:hover::after { content: attr(data-title); }
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5 CSS3 IE Cr Op Sa Fx
Всплывающая подсказка на CSS
.photo {
display: inline-block; /* Строчно-блочный элемент */
position: relative; /* Относительное позиционирование */
}
.photo:hover::after {
content: attr(data-title); /* Выводим текст */
position: absolute; /* Абсолютное позиционирование */
left: 20%; top: 30%; /* Положение подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5 CSS3 IE Cr Op Sa Fx
Всплывающая подсказка на CSS
.photo {
display: inline-block; /* Строчно-блочный элемент */
position: relative; /* Относительное позиционирование */
}
.photo:hover::after {
content: attr(data-title); /* Выводим текст */
position: absolute; /* Абсолютное позиционирование */
left: 0; right: 0; bottom: 5px; /* Положение подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
color: #fff; /* Цвет текста */
text-align: center; /* Выравнивание текста по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows