Как делается в html всплывающая подсказка? Узнайте, как создать всплывающую подсказку на чистом HTML и 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 подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость — скрытая:

  /*Начальная позиция треугольника*/ .tooltip-top:before { top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; } .tooltip-bottom:before { bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; } .tooltip-left:before { left: -31%; top: 15%; border-left-color: #fff; } .tooltip-right:before { right: -31%; top: 15%; border-right-color: #fff; } /* Конечная позиция треугольника */ .tooltip-top:hover:before { top: -21%; } .tooltip-bottom:hover:before { bottom: -26%; } .tooltip-left:hover:before { left: -11%; } .tooltip-right:hover:before { right: -11%; }

  Чтобы заставить треугольник двигаться таким же образом, как и подсказка, нужно назначить начальную и конечную позиции.

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

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

  Стандартная подсказка

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

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

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