Всплывающая подсказка при наведении html. Создание простых всплывающих подсказок на HTML5, CSS и jQuery
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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 элементы могут иметь всплывающие подсказки
Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
В данной главе мы рассмотрим
Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.
Это может быть интересно.
Основные тенденции раннего интернета
Начиная с 1997 года, вслед за появлением первых браузеров, часть потребителей активно специализируются в различных областях интернета , как и в сфере информационных технологий, и поддержке компьютерной техники. Многие пользователи становятся веб-дизайнерами, начинают создавать личные и корпоративные сайты, участвуют в сооружении локальных компьютерных сетей. Таким образом они самообразовываются. Подобное положение вещей сохранилось до наших дней. Сегодня очень модно и удобно получать знания посредством Всемирной паутины. Сегодня и особенно тогда, в середине 90-х годов прошлого века, бывшие социалистические страны нуждаются в специалистах по программированию. Есть спрос - будет и предложение. Программисты обучаются в массовом порядке - кто в университетах, кто дома перед экраном компьютера. В эти сказочные времена большую популярность обретают форумы по программированию, где молодые и не очень специалисты обмениваются своим опытом и идеями.
Всплывающая подсказка для HTML ссылкиЗдесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .
alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.
Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.
Всплывающая HTML подсказка для текстаHTML подсказка применяется практически ко всем элементам страницы.
Выражаясь по-другому, знакомый нам из примеров выше title="" могут иметь теги заголовков всех уровней, теги параграфов, блоков, изображения и линейные элементы, такие как , и другие.
Имею опыт размещения атрибута title="" в тегах заголовков первых уровней и в ссылках.
Лично я использую всплывающие подсказки , естественно, в рамках неизбежных любительских экспериментов по поисковой оптимизации текста сайта. Не берусь судить, насколько мои опыты оказались успешными. Честно говоря, результат подобной оптимизации проследить трудно, а вот переборщить с ключевыми словами и фразами можно очень легко. Поэтому будьте осторожны и не переусердствуйте в своем продвижении, так как всегда рискуете быть наказаны поисковиками.
Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут 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. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!
Интернет Windows 7, XP Windows 8 Windows 10 Безопасность Советы Программы Гаджеты Настройка Wi-Fi Телевизоры
Mozilla Firefox – мощный и удобный браузер, функционал которого можно значительно расширить за счет специальных дополнений, которые можно загрузить из магазина, встроенного в браузер. В этой статье я хочу вам рассказать о дополнении Speed Dial – удобной и
С расширением dmg чаще всего встречаются пользователи операционной системы Mac OS. Файл dmg представляет собой классический образ диска. В файле с текущим расширением могут храниться любые данные по аналогии с . Дополнительно нужно . Данная статья расскаж
Существует такое мнение, что лучше купить прошлогодний флагман, чем новую модель среднего класса. В мире Android-смартфонов это правило работает безотказно, но можно ли его применить к царству Apple? Для этого мы взяли прошлогодний iPhone X и новейший iPh
