Веб-компас сайтостроителей
/ Все статьи / CSS / Примеры с CSS / Всплывающая подсказка

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

Допустим нам нужно сделать на сайте краткое пояснение некоторых слов в текстовом содержимом. Это можно сделать несколькими способами, но мы рассмотрим пример всплывающей подсказки реализованной с помощью каскадных таблиц стилей.
Вспомним элемент <a>, у которого есть несколько псевдоклассов, один из них hover, который мы и будем использовать. Слово, которое мы хотим пояснить всплывающей подсказкой при наведении курсора на него мышкой, поместим в элемент <a>, а чтобы пользователь не ушел случайно неизвестно куда, укажем в качестве адреса символ "#". Саму подсказку поместим в элемент <span>. То есть получим следующий HTML-код
Код
В современных условиях веб-строительства все больше появляется необходимость разделения содержимого страницы и способов его оформления. Так как такой подход позволяет максимально быстро и эффективно создавать и развить веб-сайты, за счет того что программисты и дизайнеры выполняют свою работу практически независимо друг друга.
Подобная реализация возможно не без помощи <a href="#" class="vsl_help">CSS<span> Каскадные таблицы стилей</span></a>. CSS позволяют задать параметры оформления содержимого страницы в одном месте, после чего они будут автоматически применяться  к содержимому веб-страницы.

Чтобы отделить элемент <a> от других мы также указали ему класс "vsl_help". Но при просмотре данного кода вы, конечно, не увидите всплывающих подсказок. Текст подсказки просто будет отображаться на экране. Чтобы они правильно отображались нужно сейчас поработать со свойствами.
Во-первых, нужно отключить видимость подсказки в исходном состоянии, это мы сделаем следующим образом
Код
a.vsl_help span { display:none;}

Придадим нашему слову, требующему пояснения, соответствующий вид: окрасим в черный цвет (цвет текста по умолчанию в большинстве браузеров), заменим подчеркивание, ассоциирующееся со ссылкой, на подчеркивание штрихпунктирной линией, чтобы пользователи отличали данное слово от других.
Код
a.vsl_help { text-decoration: none; color:#000; border-bottom: dashed  1px #000; }

Теперь давайте подумаем, что мы хотим? Подумали?! Наверное, мы хотим, чтобы подсказка была или выше или ниже нашего слова, а это можно реализовать элементом, который абсолютно позиционирован. Так и сделаем
Код
a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
    border:solid 1px #000; background:#ddd;  color:#000; white-space:pre; padding:1px; }

Теперь для псевдокласса hover элемента <a> элемент <span> будет иметь выше приведенные свойства. Разберем их.
Свойство "position: absolute" делает элемент с подсказкой абсолютно позиционированным. Свойство "display: block" делает подсказу видимым. Свойствами "left:10px; top:-16px;" устанавливаем позицию элемента. Свойством "white-space: pre" запрещаем перенос слов на новую строку. Остальные свойства задают внешний вид нашего элемента с текстом подсказки.
Но и это еще не все. Мы определили элемент <span> абсолютно позиционированным, также нужно еще задать псевдоклассу элемента <a> относительное позиционирование. Тогда элемент <span> будет абсолютно позиционирован относительно "a.vsl_help:hover", и наши указанные выше значения "left:10px; top:-16px;" будут работать, так как мы это задумали.
Код
a.vsl_help:hover { position:relative; }

В итоге получим следующий код
Код
<html>

<head>
  <title>Всплывающие подсказки</title>
  <style>
  
  body { font-family: verdana, sans-serif; font-size:13px; }
  a.vsl_help { text-decoration:none; color:#000; border-bottom:dashed  1px #000; }
  a.vsl_help span { display:none;}
  a.vsl_help:hover { position:relative; }
  a.vsl_help:hover span { position:absolute; display:block; left:10px; top:-16px;
      border:solid 1px #000; background:#ddd;  color:#000; white-space:pre; padding:1px;}
  
  </style>
</head>
<body>
В современных условиях веб-строительства все больше появляется необходимость разделения содержимого страницы и способов его оформления. Так как такой подход позволяет максимально быстро и эффективно создавать и развить веб-сайты, за счет того что программисты и дизайнеры выполняют свою работу практически независимо друг друга.
<br> Подобная реализация возможно не без помощи <a href="#" class="vsl_help">CSS<span> Каскадные таблицы стилей</span></a>. CSS позволяют задать параметры оформления содержимого страницы в одном месте, после чего они будут автоматически применяться  к содержимому веб-страницы.
</body>
</html>

Посмотреть работу данного примера можно тут.
Можно вставлять несколько подсказок на странице. Достаточно будет поясняемое слово поместить в элемент <a> с классом "vsl_help", а саму подсказку - в элемент <span>, так как это было сделано выше.
Еще статьи из данной категории
Следующие статьи
  • нет
Комментарии к публикации
Всего комментариев: 11
прохожий: Александр | 08.04.2009, 05:28 #
Я разрабатывал бегущую строку новостей с всплывающей подсказкой, которая содержит некое пояснение к заголовку новости и столкнулся с некорректным отображением данного примера в браузерах Опера и ИЕ. В Мозилле все работало как надо.
В Опере всплывающая подсказка обрезалась размерами блока бегущей строки, а в ИЕ уезжала в бок перед первой новостью в бегущей строке и скрывалась за левой границей блока бегущей строки. Если что-нибудь знаете по решению данной проблемы, напишите пожалуйста. Было бы классно, если бы можно было как-то влиять на отображение параметра title тега <а>. Хотя бы как его заставить не исчезать в
ИЕ и Мозилле.
Автор статьи: admin | 08.04.2009, 10:22 #
Я не сталкивался со всплывающей подсказкой для бегущей строки, прокомментировать данную проблему не могу. А на счет отображения текста атрибута title тега <a> - думаю вообще нельзя ни как повлиять.
прохожий: Андрей | 01.08.2009, 07:13 #
огромное спасибо автору. везде предлагают на яваскриптах а мне хотелось чтото простое. Помогли, спасибо!
прохожий: Андрей | 01.08.2009, 21:03 #
Только что решил проверить корректность отображения в Мозилле и был огорчен
мозилла текст подсказки выдает как видимый текст рядом с картинкой
как это решить?
Автор статьи: admin | 02.08.2009, 20:06 #
Как у вас отображается приведенный пример? Я проверил в Мозилла 2 и в Мозилла 3 - все нормально отображается. Вы наверное непавильно написали код.
прохожий: abunbux | 06.09.2009, 04:30 #
Я также столкнулся с проблемой в Опере, крайне некорректное отображение всплывающей подсказки. Делал обычную всплывающую подсказку, использовал материал книги Энди Бадда "Мастерская CSS..."(практически то же самое увидел и здесь), Мозилла и ИЕ отлично справляются, опера - нет. Не могу найти решение, в поисках забрёл сюда. Подскажите. Единственное "но" - скриптов быть не должно.
Автор статьи: admin | 07.09.2009, 20:01 #
Скорее всего, это глюк браузера Опера. То, что у этого браузера проблемы с динамическим отображением контента - известная вещь. Я делал подобную всплывающую подсказку и с помощью javascript - глюк был тот же.
прохожий: Интересующийся | 14.07.2010, 06:28 #
Вопрос, можно ли в виде подсказки использовать готовую Html-страницу или таблицу? При вставлении таблицы в <span> все картинки и фоны ложатся нормально, но текст почему-то собирается сверху подсказки. Выходит голая таблица с фоном, но без текста на нужных местах.
Автор статьи: admin | 16.07.2010, 05:41 #
В данной реализации всплывающей подсказки лучше не использовать таблицы или HTML-страницы. Для отображения подобных элементов в виде подсказки желательно использовать javascript.
прохожий: Александр Панов | 08.04.2011, 03:06 #
Спасибо огромное за подробное и понятное описание. Видел такое на некоторых сайтах и очень хотельсь реализовать у себя. Протестировал на шаблоне - нет слов. Очень полезнеая и красивая вещь для любого сайта.

С уважением,
Александр П.
прохожий: Днепр Рент | 25.06.2012, 06:55 #
Попробовал использовать такие подсказки в линках на сайте - реально полезная и красивая штука, спасибо!
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей