Всплывающие подсказки, построенные только на CSS. Всплывающие подсказки на 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 контейнера:

• Tooltip bottom
• Tooltip left

  Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй — определять ее размещение.

  Вы также можете видеть пользовательский атрибут data- , который содержит текст нашей HTML подсказки.

  Создание класса tooltip

  Ниже приведен код класса tooltip :

  Tooltip { position: relative; } .tooltip:after { position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight: bold; color: #fff; content: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; z-index: 2; } .tooltip:hover:after { opacity: 1; visibility: visible; }

  Сама HTML всплывающая подсказка при наведении — это псевдоэлемент :after , она позиционируется абсолютно. Вот почему необходимо присвоить относительную позицию элементу анкора. Я добавил несколько основных стилей, такие как отступ, рамка, размер шрифта и ширина. Давайте более внимательно рассмотрим свойство content .

  Оно содержит attr() — значение, в котором хранятся наши пользовательские data-tooltip , и использующее их, чтобы вывести текст самой подсказки. Вместо data-tooltip вы можете использовать любое другое имя, просто убедитесь, что оно начинается с data- . Больше о данных атрибутов вы можете узнать здесь .

  Тело подсказки имеет минимальную ширину 80 пикселей. Если нужно, чтобы содержимое подсказки растягивалось в одну строку, то добавьте для свойства ширины значение max-content , которое в данный момент вынесено в комментарии. Следует отметить, что это экспериментальная функция, поэтому вы должны использовать вендорные префиксы -webkit- и -moz- .

  Чтобы задать для HTML подсказки при наведении эффект слайд-анимации, мы используем свойство transition . Обратите внимание на значение .25s , которое указывает задержку перед тем, как подсказка отображается или скрывается. Таким образом, она не будет выводиться, если вы наведете курсор мыши на текст по ошибке, а только при наведении курсора на более продолжительное время. Я также задал непрозрачность 0 и видимость hidden . Мы не можем использовать display: none; , потому что элемент полностью исчезнет, и мы не увидим каких-либо эффектов перехода. Непрозрачность и видимость изменяются при наведении на элемент указателя мыши.

  Результат:

  Посмотреть

  Примечание: Я изменил / удалил часть разметки и стилей в демо-версии на CodePen . Чтобы увидеть окончательный результат, посмотрите демонстрационный пример в конце этой статьи.

  Добавление движения

  Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

  /*Исходная позиция подсказки*/ .tooltip-top:after { bottom: 150%; left: 0; } .tooltip-bottom:after { top: 155%; left: 0; } .tooltip-left:after { right: 130%; min-width: 100px; } .tooltip-right:after { left: 130%; min-width: 100px; } /*Конечная позиция подсказки*/ .tooltip-top:hover:after { bottom: 120%; } .tooltip-bottom:hover:after { top: 125%; } .tooltip-left:hover:after { right: 110%; } .tooltip-right:hover:after { left: 110%; }

  Я решил добавить этот функционал в дополнительные классы. Таким образом, если вы назначите, например, класс .tooltip-left , подсказка будет выводиться слева от текста, если добавите .tooltip-top , подсказка будет выводиться сверху, и т.д.

  Посмотреть демо

  В этой демо-версии я использую класс .tooltip-right . Вы можете поэкспериментировать и применить различные классы, чтобы задать различные позиции всплывающей подсказки HTML .

  Создание треугольника

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

  /** * Треугольники */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before { content: ""; display: block; position: absolute; border-width: 7px; border-style: solid; border-color: rgba(0, 0, 0, 0); opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; } .tooltip-top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before { opacity: 1; visibility: visible; }

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

  От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в 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. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!

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

  Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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, получат подсказку.

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

  или какие HTML элементы могут иметь всплывающие подсказки

  Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.

  В меню слева вы найдете современные и очень подробные уроки по HTML.

  Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

  В данной главе мы рассмотрим

  Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.

  Это может быть интересно.

  Основные тенденции раннего интернета

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

  Всплывающая подсказка для HTML ссылки

  Здесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .

  alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.

  Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.

  Всплывающая HTML подсказка для текста

  HTML подсказка применяется практически ко всем элементам страницы.

  Выражаясь по-другому, знакомый нам из примеров выше title="" могут иметь теги заголовков всех уровней, теги параграфов, блоков, изображения и линейные элементы, такие как , и другие.

  Имею опыт размещения атрибута title="" в тегах заголовков первых уровней и в ссылках.

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

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

  Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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, получат подсказку.

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