Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Страшный сон программиста - это когда забыл пароль и девичью фамилию своей матери.

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Один программист — другому:
— Вот представь: у тебя есть 1000 рублей... Или, для круглого счета, пусть у тебя 1024...

  Моя группа в контакте:



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

Для реализации этой задачи нам потребуется знать и понимать принципы позиционирования элементов относительно друг друга в CSS, а также некоторые неочевидные варианты применения свойства border.

Файл index.html пусть будет самым простым a CSS код с комментариями, из них все должно быть понятно:

<!doctype html>
<html>
<head>
<title>Всплывающая подсказка</title>
<style type="text/css">
p{margin:100px auto;width:500px;}

.tooltip { 
  position: relative;     /* Делаем элемент родительским для всплывающих подсказок */
}
.tooltip span {
  position: absolute;     /* Выводим элемент из потока */
  margin-left: -30000px;  /* И прячем далеко за краем экрана */
}
.tooltip:hover span {     /* При наведении */
  margin-left: 0;         /* Возвращаем из далекого заэкранного края блок на место */
  width: 250px;           /* Задаем ширину */
  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>

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

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь