Всплывающая HTML подсказка и ее реализация. Всплывающая подсказка html и css без скриптов Всплывающие подсказки html на форму

Влад Мержевич

В 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 , то можно получить более-менее работающий вариант.

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

Решение Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.HTML Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:
Всплывающие подсказки Ссылка
Как вы уже могли заметить из листинга, я использую 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, получат подсказку.

Спасибо за внимание!

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

Одним из широко используемых механизмов для вывода дополнительных сведений, кроме тех, что видны на странице, являются всплывающие подсказки(элементы дизайна для отображения подсказок об определённых элементах на экране).

В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.

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

Всплывающие подсказки - это круто!

Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.

Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.

Большинство браузеров имеют стили по умолчанию для всплывающих подсказок, хотя они и выглядят не очень симпатично.

Усиление эффекта воздействия всплывающих подсказок

В то время как быстро развивающиеся стандарты с новыми методами начинают все лучше и лучше поддерживаться новыми браузерами, развитие CSS также позволяет нам делать всплывающие подсказки (которые служат заменой скучным установкам по умолчанию в браузерах, как на рисунке выше) на новом уровне детализации и оформления.

Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.

Что мы собираемся сделать

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

Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.

Вид эффектов, таких как цвета, шрифты, изображения и рамки для всплывающих подсказок будет зависеть от того, что используется на компьютере конечного пользователя (браузера, установленных шрифтов или контраста монитора).

Расширения CSS3

Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.

Что у нас под капотом?

Начнём с кода HTML для нашего примера.

различные типы всплывающих подсказок

Для того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем пять различных типов всплывающих подсказок.

Каждый из них выглядит очень похоже на другие, для того, чтобы стандартизировать вывод на экран. Но вы можете потом поэкспериментировать с ними для детального изучения и изменения внешнего вида.

Кросс-браузерная совместимость

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

Основная разметка

В коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом .

Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега .

Также вы можете добавить код jQuery или JavaScript для улучшения эффектов и функциональности, если хотите!

Разметка HTML Всплывающие подсказки Пример всплывающих подсказок, сделанных на CSS!

Наведите курсор мыши на надписи чтобы увидеть: классическую подсказку, критическое сообщениеКритическое сообщениеЭто просто пример того, как сделать подсказки с использованием CSS!, помощьПомощьЭто просто пример того, как сделать подсказки с использованием CSS!, информацияИнформацияЭто просто пример того, как сделать подсказки с использованием CSS! и предупреждениеПредупреждениеЭто просто пример того, как сделать подсказки с использованием CSS!.
Это просто пример того, как сделать подсказки с использованием CSS!

В коде используется элемент (ничего особенного с ним не связано) и параграфы (

) для текста, которые содержат элементы ссылок (для которых установлен класс "tooltip").

Почему для всплывающих подсказок используется тег ?

Причина того, что мы используем тег a , а не abbr , dfn или span , заключается в том, что IE6 ущербно поддерживает псевдо-селектор:hover для других элементов, отличных от a .

Если вы не собираетесь поддерживать IE6, то можно использовать другой тег.

Для каждого элемента span в примере установлен класс classic (для обычной всплывающей подсказки) или custom (с critical , help , info или warning , которые соответствуют используемой цветовой схеме).

Такое использование стилей также имеет пару бонусов в виде элемента em (устанавливает заголовок всплывающей подсказки) и изображения (которое используется как иконка во всплывающей подсказке, вы можете использовать свои изображения).

CSS

У нас написан код HTML для страницы и пришла пора заставить всплывающие подсказки делать их работу.

Ниже приведённый код, который добавляется в секцию страницы, задаёт для каждой ссылки, содержащий всплывающую подсказку, миленький стиль с подчёркиванием точечной линией (чтобы отличаться от обычной ссылки, которая подчёркивается сплошной линией) и устанавливает курсор со знаком вопроса (тоже для визуальной дифференциации).

Также удаляется подчёркивание и устанавливается цвет (таким образом элемент становится меньше похож на обычную ссылку).

Вторая часть кода просто скрывает всплывающую подсказку до тех пор, пока она не будет нужна.

Все очень просто!

Стили CSS для класса.tooltip .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -999em; position: absolute; }

Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.

Стили CSS для всплывающих подсказок

Вскоре мы установим функционирование всплывающих подсказок для одинакового отображения в различных браузерах. А сейчас добавим несколько строк кода CSS.

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

CSS для отображения всплывающей подсказки .tooltip:hover span { font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } * html a:hover { background: transparent; } Необходимость строки * html

У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!

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

Задаём цветовую схему для всплывающих подсказок/

Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.

После изменения кода страницы и обновления её в браузере, всплывающие подсказки будут выводиться при наведении курсора мыши на ссылку почти одинаково во всех браузерах.

Код CSS для цветовой схемы .classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде. Цветовую схему можно поменять по своему усмотрению.

Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок

Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow .

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

Добавим ниже приведённый код в селектор.tooltip:hover span и обновим страницу.

Визуальные эффекты для рамки, тени и прозрачности поднимают всплывающую подсказку над текстом страницы и делают информацию контрастной и лёгкой для чтения.

Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.

Дополнительные свойства CSS для новых браузеров border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Резюме

В данном уроке продемонстрировано, что для улучшения интерфейса не нужно прилагать больших усилий. Кроме того, стоит пересмотреть опыт использования CSS, который может быть полезным в вопросе установки нового уровня интерактивности веб приложения.

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 контейнера:

Всплывающая HTML подсказка и ее реализация. Всплывающая подсказка html и css без скриптов Всплывающие подсказки html на форму

Читайте также

Темы оформления и русификация форума SMF, а так же установка компонента JFusion в Joomla

Кумир версия 2.1 0. Установка среды кумир. Плюсы и минусы

JQuery-плагин для стилизации селектов

THE BELL