Всплывающие подсказки, построенные только на CSS

Всплывающие подсказки с использованием только CSS

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

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

В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.

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

Всплывающие подсказки - это круто!

Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.

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

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

Усиление эффекта воздействия всплывающих подсказок

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

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

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

Что мы собираемся сделать

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

Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.

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

Расширения CSS3

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

Что у нас под капотом?

Начнём с кода HTML для нашего примера.

различные типы всплывающих подсказок

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

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

Вот так замечательно могут выглядеть всплывающие подсказки, значительно лучше, чем то что возможно по умолчанию!
Вот так замечательно могут выглядеть всплывающие подсказки, значительно лучше, чем то что возможно по умолчанию!

Кросс-браузерная совместимость

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

Основная разметка

В коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом <head>.

Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега <style>.

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

Также вы можете добавить код jQuery или JavaScript для улучшения эффектов и функциональности, если хотите!

Разметка HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Всплывающие подсказки</title>
</head>
<body>
<h1>Пример всплывающих подсказок, сделанных на CSS!</h1>
<p>Наведите курсор мыши на надписи чтобы увидеть:
<a class="tooltip" href="#">классическую подсказку<span class="classic">Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">критическое сообщение<span class="custom critical"><img src="Critical.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">помощь<span class="custom help"><img src="Help.png" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">информация<span class="custom info"><img src="Info.png" alt="Информация" height="48" width="48" /><em>Информация</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>
		и <a class="tooltip" href="#">предупреждение<span class="custom warning"><img src="Warning.png" alt="Предупреждение" height="48" width="48" /><em>Предупреждение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>. 
<br/>
		Это просто пример того, как сделать подсказки с использованием CSS!</p>
</body>
</html>

В коде используется элемент <h1> (ничего особенного с ним не связано) и параграфы (<p>) для текста, которые содержат элементы ссылок <a> (для которых установлен класс "tooltip").

Почему для всплывающих подсказок используется тег <a>?

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

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

Каждая ссылка содержит элемент span с текстом подсказки.

Код HTML без применения стилей.
Код HTML без применения стилей.

Элемент ссылки эффективно работает для использования события hover и для использования стилей документа. Содержимое элементов span скрывается до тех пор, пока в них нет необходимости.

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

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

CSS

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

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

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

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

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

Стили CSS для класса .tooltip

<style type="text/css">
.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
</style>

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

Стили CSS придают странице тот вид, который нужен.
Стили CSS придают странице тот вид, который нужен.

Стили CSS для всплывающих подсказок

На данном этапе ссылки не имеют установок для вывода всплывающих подсказок при наведении курсора мыши.

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

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

CSS для отображения всплывающей подсказки

.tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

Необходимость строки * html

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

Всплывающие подсказки начали работать, а оформление добавим позже!
Всплывающие подсказки начали работать, а оформление добавим позже!

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

Задаём цветовую схему для всплывающих подсказок/

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

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

Код CSS для цветовой схемы

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

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

Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок

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

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

Стили придают всплывающим подсказкам замечательный вид и уникальность!
Стили придают всплывающим подсказкам замечательный вид и уникальность!

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

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

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

Дополнительные свойства CSS для новых браузеров

border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Используем свойства CSS3.
Используем свойства CSS3.

Резюме

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: sixrevisions.com/css/css-only-tooltips/
Перевел: Сергей Фастунов
Урок создан: 2 Августа 2010
Просмотров: 167980
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Августа 2010 18:43
    rekon
    классный урок
  • 2 Августа 2010 19:15
    Юрий
    супер!!))
  • 3 Августа 2010 04:16
    toska
    Как избежать наложения встроенного тултипа? Использую оперу пример http://s39.radikal.ru/i086/1008/12/c088926a58b0.jpg
  • 3 Августа 2010 07:08
    Сумрак
    КЛАСС!!!
  • 6 Августа 2010 09:30
    yurec
    И как всегда c explorerom проблема!
  • 14 Августа 2010 18:48
    ulliveru
    toska я думаю, что никак. =(
  • 21 Августа 2010 02:53
    VLOmper
    Жаль что радиус закругления можно сделать в CSS3. и в очень многих браузерах не будет работать(((
  • 13 Сентября 2010 20:26
    Александр
    В мозиле супер всё отображается!
  • 24 Сентября 2010 13:09
    exos
    проблема выскакивает в опере - при прокрутке вниз тултип начинает уезжать вверх от текста и потом его вообще не видно - свойство position relative не наследуется толком
  • 28 Октября 2010 13:35
    genixxx
    Проблема в том, что стили написаны с учетом тегов (tag based rules), например, .tooltip:hover img {}, Ставим задачу вместо текста разместить изображение. Казалось бы, замени текст ссылкой на картинку и готово. Однако вышла ерунда. .tooltip:hover img {} — это правило при наведении на элемент с классом .tooltip (ссылку) ищет внутри него ЛЮБУЮ картинку и производит над ней действия. В том числе и ту новую, что мы хотим расположить внутри «инфо-облака» (хотя это правило должно распространяться только на иконку слева сверху). Помимо таких вот побочных действий, это еще и неэффективный код с точки зрения рендеринга в браузере. В итоге пришлось иконке присвоить класс и в css это правило выглядело так .tooltip:hover img.info-icon {} Все время прошу не тупо переводить уроки, а показывать какие-то еще примеры использования. Если возможно, конечно.
  • 23 Ноября 2010 08:54
    zemlen
    Урок полезный, но вот вопрос, как заставить тултипы работать c <area> Так и не дошло...
  • 3 Января 2011 22:28
    durogon
    Подскажите, как избавиться от знака вопроса при наведении курсором?
  • 10 Января 2011 10:40
    Rinat
    Супер. Спасибо.
  • 25 Февраля 2011 10:58
    grumbler
    сделал по рекомендации genixx. Маленькое изображение оказалось внутри рамки. Можно его оттуда достать?
  • 2 Марта 2011 00:06
    egerma
    А Вас не настораживает margin-left: -999em; с точки зрения SEO оптимизации.
  • 21 Марта 2011 17:55
    ICEBERG
    У меня проблема с этим уроком. Если стили прописаны на самой странице то все работает нормально. Но мне нужно вынести все в отдельный файл стилей.
    <link href="blocks/style.css" rel="stylesheet" type="text/css">
    После чего все подсказки оказываются не у ссылки, а у левого края экрана. Как это исправить?
  • 12 Мая 2011 16:36
    sadchenko
    Превосходный урок. Спасибо автору!!!
  • 23 Мая 2011 18:00
    cemen_1980
    Если ссылка у края экрана, то подсказка оказывается за бортом монитора...
  • 9 Апреля 2012 15:39
    Slonoritsar
    пригодилось
  • 27 Августа 2012 15:12
    Ronnie
    А как сделать, чтобы эта подсказка не выходила за границы сайта? Из-за того, что текст в подсказке может быть большим - подсказка выходит и часть её может быть не видна.
  • 19 Марта 2014 15:26
    valpy
    Классные подсказки. Как сделать, чтобы они всплывали только по нажатию? Сейчас большой процент пользователей с планшетами и открытие по наведению для них не особо применимо.
    • 19 Сентября 2014 08:44
      jopodish
      Вместо :hover использовать :oneclick
^ Наверх ^