Html подсказка при наведении с вопросом. Создание простых всплывающих подсказок на HTML5, CSS и jQuery
или какие HTML элементы могут иметь всплывающие подсказки
Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
В данной главе мы рассмотрим
Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.
Это может быть интересно.
Основные тенденции раннего интернета
Начиная с 1997 года, вслед за появлением первых браузеров, часть потребителей активно специализируются в различных областях интернета , как и в сфере информационных технологий, и поддержке компьютерной техники. Многие пользователи становятся веб-дизайнерами, начинают создавать личные и корпоративные сайты, участвуют в сооружении локальных компьютерных сетей. Таким образом они самообразовываются. Подобное положение вещей сохранилось до наших дней. Сегодня очень модно и удобно получать знания посредством Всемирной паутины. Сегодня и особенно тогда, в середине 90-х годов прошлого века, бывшие социалистические страны нуждаются в специалистах по программированию. Есть спрос - будет и предложение. Программисты обучаются в массовом порядке - кто в университетах, кто дома перед экраном компьютера. В эти сказочные времена большую популярность обретают форумы по программированию, где молодые и не очень специалисты обмениваются своим опытом и идеями.
Всплывающая подсказка для HTML ссылкиЗдесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .
alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.
Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.
Всплывающая HTML подсказка для текстаHTML подсказка применяется практически ко всем элементам страницы.
Выражаясь по-другому, знакомый нам из примеров выше title="" могут иметь теги заголовков всех уровней, теги параграфов, блоков, изображения и линейные элементы, такие как , и другие.
Имею опыт размещения атрибута title="" в тегах заголовков первых уровней и в ссылках.
Лично я использую всплывающие подсказки , естественно, в рамках неизбежных любительских экспериментов по поисковой оптимизации текста сайта. Не берусь судить, насколько мои опыты оказались успешными. Честно говоря, результат подобной оптимизации проследить трудно, а вот переборщить с ключевыми словами и фразами можно очень легко. Поэтому будьте осторожны и не переусердствуйте в своем продвижении, так как всегда рискуете быть наказаны поисковиками.
Здравствуйте, уважаемые друзья. На днях один из моих заказчиков обратился ко мне с просьбой доработать его сайт. А точнее, сделать новую форму заявки на сайте, так как старая форма сменилась.
А ещё он попросил прикрутить к каждому полю формы всплывающую подсказку. Вы, наверное, такие подсказки видели, когда подводишь курсор мышки на изображение или на слово, то появляется всплывающая подсказка.
Вариантов реализовать такие подсказки, конечно, предостаточно. Я, естественно, ориентируясь на минимизацию нагрузки на сервер, решил сделать всплывающие подсказки с помощью 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; /*внутренний отступ*/ }
Как видите, я сделал для вас подсказки. Вам лишь остаётся сделать изменения под ваш дизайн и можно наслаждаться всплывающими подсказками. А если вашим посетителям приходится что-то заполнять, регистрироваться на сайте или выполнять какие-то действия, то подсказки вам просто необходимы. А ваши посетители будут вам премного благодарны.
В данной статье я хочу обсудить несколько вариантов организации подобной фишки в любой верстке. Кстати, живой пример такой реализации уже имеется у меня на сайте. Если прокрутите до комментариев на этой странице и наведете на дату комментария, сразу точно станет понятно, о чем речь. Ну а если же комментариев еще нет, можете его заодно и оставить.
Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.
Я думал в данной статье начать с самого примитива, вывод подсказки с помощью title , который не получится как-либо оформить, однако я думаю его можно пропустить, так как это и так понятно. Если вышесказанное Вам не совсем понятно, думаю, после изучения видео об , все станет гораздо понятней.
Простой способ с оформлением, при наведении.Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:
?
/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */ .hover:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */ .hover:hover:after{display: block;}
Здесь же хочу обратить Ваше внимание, что это только пример свойств оформления. Вы можете естественно оформить внешний вид плашки, как Вам угодно.
Всплывающая подсказка при наведении.Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.
? это подсказка с оформлением
В данном примере так же не вижу ничего особенного, однако побольше, но и результат будет получше и без использования атрибута data-title . Контейнер в данном случае служит оболочкой для наших элементов, которые будут использованы для реализации подсказки. А так же сама плашка будет позиционироваться относительно контейнера.
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при наведении */ .hover:hover + .hidden{display: block;}
Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.
Существуют еще два способа, однако они практически идентичны, за исключением того, что появление элемента происходить будет при клике по элементу, который всегда отображается на сайте.
Простой способ с оформлением, при клике.В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover . Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить на , то есть на гиперссылку.
?
Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus .
/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */ .focus:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */ .focus:focus:after{display: block;}
Как видите разницы практически нет.
Всплывающая подсказка при клике.Этот способ при клике так же будет более актуален, если Вам требуется оформить подсказку немного лучше нежели это возможно в предыдущем варианте.
? это подсказка с оформлением
И собственно оформление плашки:
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при клике */ .focus:focus + .hidden{display: block;}
Как Вы можете наблюдать ничего сложного нет. К тому же можно организовать изменения состояний, как по наведению, так и по клику. Хотя я честно говоря, не могу сказать насколько актуален способ по клику.
Существует так же имитация последнего примера с помощью , однако его использование мне кажется не совсем правильным именно для организации всплывающей подсказки у себя на сайте. Если Вы со мной категорически не согласны, добро пожаловать в комментарии.
Видео урок — Всплывающая подсказка без скриптов.На этом у меня все. Всем удачи.
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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 всплывающую подсказку разными способами.
Стандартная подсказкаПо умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.
< img src = "tiger.jpg" title = "Это тигр" > |
Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:
Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.
Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.
Способ на чистом cssОчень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.
Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.
#tiger{ position: relative; display: inline-block; }
#tiger{ position : relative ; display : inline - block ; |
Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:
#tiger:hover:after { content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; }
#tiger:hover:after { content : attr (data - name ) ; position : absolute ; left : 0 ; bottom : 0 ; background : rgba (5 , 13 , 156 , . 55 ) ; color : #fff; text - align : center ; font - family : cursive ; font - size : 14px ; padding : 3px 0 ; width : 100 % ; |
Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.
Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.
Способ 2. Чистый css и плавное появлениеВпрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.
Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах
Итак, код этого примера будет немного отличаться, и это по той причине, что мы не будем использовать псевдоэлемент. Именно из-за него невозможно было применить плавные изменения. В этот раз код будет выглядеть так:
Суматранский тигр
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" > Суматранскийтигр< / div > < / div > |
CSS код не претерпел каких-то огромных изменений:
#tiger2{ position: relative; display: inline-block; } #tiger2 .text { transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); } #tiger2:hover .text{ opacity: 1; }
#tiger2{ position : relative ; display : inline - block ; #tiger2 .text { transition : all 0.6s ; transform : scale (0 ) ; #tiger2:hover .text{ opacity : 1 ; |
Убираем только свойство content, так как оно поддерживается лишь псевдоэлементами. Дописываем свойство transition, которое и создает плавные переходы состояний. Ну а opacity: 0 даст нашему блоку с подсказкой полную прозрачность, поэтому он не будет виден на странице.
При наведении на блок теперь достаточно вернуть нормальную прозрачность блоку с подсказкой. Готово. Можете проверить, элемент появляется плавно.
С помощью css3 можно скрыть элемент и по-другому. С помощью трансформаций, например. Замените полную прозрачность на вот такое свойство: transform: scale(0) и размер блока будет уменьшен до нулевого, так что его попросту не будет на экране. При наведении же на блок с картинкой следует вернуть нормальный размер вот так: transform: scale(1). В таком случае эффект появления будет смотреться еще красивее. Можете убедиться в этом сами.
Как видите, на css всплывающая подсказка также может появляться медленно с красивыми эффектами.
Другие способыЕще больше возможностей вам может дать jQuery. С помощью этой библиотеки можно написать код для вывода подсказки как самостоятельно, так и найти какой-нибудь плагин, который уже реализует это дело.
Например, в фреймворке Bootstrap тоже есть много готовых компонентов и один из них, это как раз всплывающие подсказки. Вы можете посмотреть в документации к фреймворку примеры кода, которые позволяют создать эти самые подсказки, и использовать их. Необязательно подключать весь Bootstrap, можно вообще оставить только такой компонент, как подсказки (toolptips), скачать и подключить только его.
В общем, сегодня я показал вам способы на css, как сделать красивую подсказку с резким и плавным появлением, помимо этого в вашем арсенале есть Bootstrap и jQuery. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!