1. Главная страница » Как сделать...? » Пример всплывающей подсказки на CSS

Пример всплывающей подсказки на CSS

Автор: | 05.01.2013

Для реализации этой задачи нам потребуется знать и понимать принципы позиционирования элементов относительно друг друга в 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>

Посмотреть что получилось!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code