Допустим нам нужно сделать на сайте краткое пояснение некоторых слов в текстовом содержимом. Это можно сделать несколькими способами, но мы рассмотрим пример всплывающей подсказки реализованной с помощью каскадных таблиц стилей.
Вспомним элемент
<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>, так как это было сделано выше.
В Опере всплывающая подсказка обрезалась размерами блока бегущей строки, а в ИЕ уезжала в бок перед первой новостью в бегущей строке и скрывалась за левой границей блока бегущей строки. Если что-нибудь знаете по решению данной проблемы, напишите пожалуйста. Было бы классно, если бы можно было как-то влиять на отображение параметра title тега <а>. Хотя бы как его заставить не исчезать в
ИЕ и Мозилле.
мозилла текст подсказки выдает как видимый текст рядом с картинкой
как это решить?
С уважением,
Александр П.