Для реализации этой задачи нам потребуется знать и понимать принципы позиционирования элементов относительно друг друга в CSS, а также некоторые неочевидные варианты применения свойства border.
Файл index.html пусть будет самым простым a CSS код с комментариями, из них все должно быть понятно:
<!doctype html>
<html>
<head>
<title>Всплывающая подсказка</title>
<style type="text/css">
p{margin:100px auto;width="99%";}
.tooltip {
position: relative; /* Делаем элемент родительским для всплывающих подсказок */
}
.tooltip span {
position: absolute; /* Выводим элемент из потока */
margin-left: -30000px; /* И прячем далеко за краем экрана */
}
.tooltip:hover span { /* При наведении */
margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */
width="99%"; /* Задаем ширину */
z-index: 1000; /* Помещаем на самый верх */
/* Позиционируем относительно родительского блока */
top:30px; /* Отступ сверху */
left:30px; /* Отступ слева */
}
.tooltip {
border-bottom:1px dotted #3f3f3f;
cursor: help;
}
.tooltip span{
background-color: #3f3f3f; /* Фон всплывающего блока*/
color: #fafafa; /* Цвет текста */
padding:10px; /* Отступы */
}
.tooltip span{ /* Закругляем уголки */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(pie.htc);
}
.tooltip span:after{
content: ''; /* Добавили контент */
width:0; /* Спрятали его, превратив в 0 */
height:0;
border-bottom: 10px solid #3f3f3f; /* Нижним бордером задаем цвет и высоту треугольника */
border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */
position: absolute; /* Позиционируем относительно родительского блока */
top:-10px;
left:10px;
}
</style>
</head>
<body>
<p>
Наведите курсор на <span class="tooltip"> эту ссылку <span>И увидите всплывающую подсказку</span></span>.
</p>
</body>
</html> |
