В этой статье хочется рассказать о том, как создавать всплывающие подсказки с использованием 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-документ, и посмотрите на результат. Также рекомендую побаловаться со значениями свойств.
Вот такая небольшая статья.