Всплывающая подсказка на CSS. Как делается в html всплывающая подсказка? Html код всплывающей подсказки при наведении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот и все!
В итоге мы получим что-то такое: Демо

Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

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

На этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом CSS . Точно такой же принцип можно применить к картинке. Перейдите для просмотра демо страницы .

Создадим список из пяти пунктов. Внутри каждого пункта поместим тег i с нужной иконкой, просто скопировав код конкретной иконки с сайта Font Awesome .

Под тегом иконки пропишем тег span с соответствующим коротким текстом-подсказкой.

• 
  
  Удобные номера
  


• 
  
  Кредитные карты
  


• 
  
  Душ в номере
  


• 
  
  Завтрак включен
  


• 
  
  Питомцы OK
  

После этого подключаем файл стилей - style.css . Меняем положение иконок из вертикального положения в горизонтальное.

Для этого родительскому контейнеру прописываем значение - flex .

Ul {
display: flex;
}

Раскрашиваем фоновую основу под иконками и цвет самих иконок.

Ul li {
background: #cecfcf;
color: #fff;
}

Размер иконки задается через размер шрифта.

Ul li {
font-size: 40px;
}

Внешний вид иконочного ряда уже сформирован.

При наведении курсора на иконку, меняется цвет иконки и вид курсора.

Ul li:hover {
color: #03a9f4;
cursor: pointer;
}

При наведении на иконку, будет всплывать текстовая подсказка в прямоугольном блоке, в HTML разметке - это текст в теге span . Расположим подсказки выше иконок.

Ul li span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%) translateY(-20px);
}

Размеры боксов зададим следующие фиксированные размеры.

Ul li span {
width: 120px;
height: 24px;
}

Выравнивание текста по центру по вертикали и горизонтали.

Ul li span {
line-height: 24px;
text-align: center;
}

Цвет фона, текста и размер текста.

Ul li span {
background: #03a9f4;
color: #fff;
font-size: 14px;
}

Скругляем углы на 4 пикселя и делаем плавный переход при наведении.

Ul li span {
border-radius: 4px;
transition: .5s;
}

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

Ul li span {
opacity: 0;
visibility: hidden;
}

Для того, чтобы нарисовать небольшую стрелочку под блоком, мы будем использовать псевдоэлемент ::before , что на практике означает, что стрелочка реально отсутствует в HTML файле (пустой content ), а существует только в CSS файле. Стрелочка с направленным остриём на иконку - не что иное, как фигура квадрата 10x10 пикселей, повёрнутая на 45 градусов и прижатая к блоку span с отрицательным значением. В итоге квадрат трансформирован в треугольник и лежит на слое ниже z-index: -1 , чем его родитель тег span .

От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.

По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.

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

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

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

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

#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 означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.

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

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

Итак, код этого примера будет немного отличаться, и это по той причине, что мы не будем использовать псевдоэлемент. Именно из-за него невозможно было применить плавные изменения. В этот раз код будет выглядеть так:

Суматранский тигр

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; }

Убираем только свойство content, так как оно поддерживается лишь псевдоэлементами. Дописываем свойство transition, которое и создает плавные переходы состояний. Ну а opacity: 0 даст нашему блоку с подсказкой полную прозрачность, поэтому он не будет виден на странице.

При наведении на блок теперь достаточно вернуть нормальную прозрачность блоку с подсказкой. Готово. Можете проверить, элемент появляется плавно.

С помощью css3 можно скрыть элемент и по-другому. С помощью трансформаций, например. Замените полную прозрачность на вот такое свойство: transform: scale(0) и размер блока будет уменьшен до нулевого, так что его попросту не будет на экране. При наведении же на блок с картинкой следует вернуть нормальный размер вот так: transform: scale(1). В таком случае эффект появления будет смотреться еще красивее. Можете убедиться в этом сами.

Как видите, на css всплывающая подсказка также может появляться медленно с красивыми эффектами.

Еще больше возможностей вам может дать jQuery. С помощью этой библиотеки можно написать код для вывода подсказки как самостоятельно, так и найти какой-нибудь плагин, который уже реализует это дело.

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

В общем, сегодня я показал вам способы на css, как сделать красивую подсказку с резким и плавным появлением, помимо этого в вашем арсенале есть Bootstrap и jQuery. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!