Всплывающая подсказка на CSS
Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS. Иногда на сайте появляется необходимость расшифровывать некоторые аббревиатуры, а также сокращения слов. И становится необходимо реализовывать всплывающие подсказки, но перед Вами встает главный вопрос как это можно реализовать, а главное с минимальными усилиями и без использования скриптов. Данный способ я и попытаюсь Вам сегодня рассказать. Для этого нам понадобится некоторая, довольна простая html структура, которую мы сейчас и напишем.
<html>
<head>
<title>Подсказки</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="prompt">
<p>А Вы знаете что такое <a href="#">CSS<span>Cascading Style Sheets — каскадные таблицы стилей</span></a> ?</p>
</div>
</body>
</html>
Как видите, структура такова, в блоке находится параграф, и ссылка внутри которой находится аббревиатура, и в теге span хранится ее расшифровка. Нам остается лишь реализовать все при помощи CSS. Давайте приступим:
.prompt p a {
color: #000;
cursor: pointer;
position: relative;
text-decoration: underline;
}
.prompt p a span {
background: #fff;
border: 1px solid #000;
display: none;
padding: 7px 15px;
position: absolute;
top: 27px;
left: 0;
width: 180px;
z-index: 1;
}
.prompt p a span:before {
border-width: 0 10px 9px;
border-color: transparent transparent #000 transparent;
border-style: solid;
content: "";
position: absolute;
top: -9px;
left: 10px;
}
.prompt p a:hover span {
display: block;
}
Все готово, теперь при наведении курсора мыши на ссылку, ниже отображается подсказка, которая находится в теге span. основной принцип реализации построен на позиционировании элементов. Для ссылки мы устанавливаем относительное позиционирование, а для находящегося внутри тега абсолютное. Остальные моменты реализации должны быть Вам понятны, но я бы рекомендовал самостоятельно написать данный код и разобраться в нем, ведь это будет гораздо полезнее, чем обычное прочтение данной статьи. Как видите, реализация всплывающих подсказок возможна и без помощи скриптов, а лишь используя язык CSS. На этом мы можем завершать урок, удачного изучения материала и до скорого!
