Создание всплывающей подсказки
В этой статье хочется рассказать о том, как создавать всплывающие подсказки с использованием CSS. Тема очень популярная, поэтому я решил её осветить.
Давайте сразу приведу код, позволяющий реализовать всплывающие подсказки:
<html>
<head>
<title>Всплывающие подсказки</title>
<style>
a.help {
text-decoration: none;
color: #000000;
border-bottom: dashed 1px #000;
}
a.help span {
display: none;
}
a.help:hover {
position: relative;
}
a.help:hover span {
position: absolute;
display: block;
left: 10px;
top: 25px;
border: solid 1px #000000;
background: #FFFFFF;
color: #000000;
white-space: pre;
padding: 2px;
}
</style>
</head>
<body>
Одним из важнейших параметров
<a href="/" class="help">
АЦП
<span> Аналого-цифровой преобразователь</span>
</a>
является его разрядность.
</body>
</html>Как видите, всё очень просто. Изначально элемент <span> внутри тега <a> с классом "help" невидимый (display: none;). Но как только мы наводим мышку на тег <a> (a.help:hover), как сразу для элемента <span> срабатывают стили, и он появляется. Все остальные свойства задают расположение и внешний вид. Мой Вам совет: скопируйте код и вставьте в обычный HTML-документ, и посмотрите на результат. Также рекомендую побаловаться со значениями свойств.
Вот такая небольшая статья.
-
Создано 06.12.2010 18:20:03
-
Михаил Русаков
Комментарии (14):
Михаил, вот у меня есть код стиля: a.help { text-decoration: none; color: #000000; border-bottom: dashed 1px #000; } a.help title { display: none; } a.help:hover { position: relative; } a.help:hover title { position: absolute; display: block; left: 10px; top: 25px; border: solid 1px #000000; background: #3D3D3D; color: #FFFFFF; white-space: pre; padding: 2px; font-family: "verdana", "arial", "helvetica"; font-size: 8pt; line-height: 10px; margin: 1px; padding: 8px; position: absolute; width: auto; } как мне сделать штоби он применялся ко всем атрибутам title??
Ответить
Использовать селектор параметров: http://myrusakov.ru/selektory-css.html
Ответить
Михаил, а как всплывающую подсказку сделать для картинки. Также должен быть изменён курсор (как изменить знаю).
Ответить
Вместо ссылки вставить очевидно изображение. А для изменения курсора есть свойство cursor в CSS.
Ответить
Михаил, а вот в коде a.help:hover { position: relative; } почему именно при hover? Я обычно делал без него и всё вполне получалось. В чём различия?
Ответить
хотя, я предпологаю, что это сделано для того, чтобы данный триггер срабатывал только при наведении (кеп), я имею ввиду, что если мы что-то будем ещё добавлять, то нам не мешало это позицианирование каким-то образом, а "включалось" только тогда, когда надо.
Ответить
Для данного примера я сделал именно hover. В принципе, можно и другим способом его активировать.
Ответить
Михаил, у меня подсказка всплывает, когда навожу мышкой, но не исчезает, когда убираю курсор. Если position задать как fixed, или static (или любое другое), то при наведении - подсказка появляется (хоть и не там, где надо), при убирании - исчезает. И только при position: absolute подсказка не исчезает. Так и должно быть? Дополнение: при выделении курсором любого символа или слова из фразы "является его разрядность." подсказка-таки исчезает. При выделении любого другого элемента на странице ничего не происходит.
Ответить
Добрый день, Михаил! Подскажите пожалуйста, при использовании position:relative для блоков, у меня остается прокрутка, т.е. браузер считает (или оставляет это место) бля блока, который в данный момент находится совершенно в другом месте, подскажите, как это исправить?
Ответить
Верстайте адаптивной версткой, так же прибегайте к использованию "резины".
Ответить
Спасибо за пример! А можно в него добавить такое свойство, чтобы подсказка следовала за движением мышки?
Ответить
a.help { text-decoration: none;/*убираем подчёркивание у ссылки*/ color: #000000; border-bottom: dashed 1px #000; } a.help span { display: none;/*просто скрываем вспл подсказку*/ } a.help:hover { position: relative; } a.help:hover span { position: absolute;/*у родителя relative значит top left отсчит от родителя, влияет на положение подсказки*/ display: block;/*нужно чтобы span вёл себя как блок*/ left: 10px; top: 25px; border: solid 1px #000000;/*свойства для задания подсказки*/ background: #FFFFFF; color: #000000; white-space: pre;/* нужно чтобы текст подсказки показывался одной строкой без переносов*/ padding: 2px; }
Ответить
тем кто не въехал в код стилей ;)
Ответить
Здравствуйте Михаил! Появился такой вопрос к Вашему примеру всплывающей подсказки: - Как убрать рамку вокруг вставленной в код картинки в виде подсказки, вернее сказать - снизу у картинки. Рамка вокруг картинки убирается с трёх сторон - слева, сверху, справа - если в последнем блоке поставить padding: 0px;, а вот нижняя часть не убирается. Пробовал менять параметры у строки border: solid 1px #000000;, но ничего не получилось. Пробовал совсем удалять все параметры border. Картинку в виде подсказки вырезаю программой HyperSnap. Можно ли как-то вообще без рамок обойтись?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.