Всплывающие подсказки, построенные только на CSS


Всплывающие подсказки, построенные только на CSS

1389
6 из 10
Проголосовало: 2




html

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Всплывающие подсказки</title>
</head>
<body>
<h1>Пример всплывающих подсказок, сделанных на CSS!</h1>
<p>Наведите курсор мыши на надписи чтобы увидеть:
<a class="tooltip" href="#">классическую подсказку<span class="classic">Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">критическое сообщение<span class="custom critical"><img src="http://webo4ka.ru/Ucoz2/Critical.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">помощь<span class="custom help"><img src="http://webo4ka.ru/Ucoz2/Help.png" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
<a class="tooltip" href="#">информация<span class="custom info"><img src="http://webo4ka.ru/Ucoz2/Info.png" alt="Информация" height="48" width="48" /><em>Информация</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>
  и <a class="tooltip" href="#">предупреждение<span class="custom warning"><img src="http://webo4ka.ru/Ucoz2/Warning.png" alt="Предупреждение" height="48" width="48" /><em>Предупреждение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>.  

</body>
</html>

css

Code
<style type="text/css">
.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}

.tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
<strong>* html</strong> a:hover { background: transparent; }

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://sixrevisions.com/css/css-only-tooltips/
  • Всего комментариев: 5

KristiCat
0
KristiCat написал: Написано 25 Февраля 2011 в 10:32
Комментарий №5
Спасибо, полезно, давно искала!

rehito
0
rehito написал: Написано 24 Февраля 2011 в 19:14
Комментарий №3
а для чего это?

Вовчик
+1
Вовчик написал: Написано 24 Февраля 2011 в 22:24
Комментарий №4
если не знаешь, то тебе это не нужно!

DaMaGe
0
DaMaGe написал: Написано 23 Февраля 2011 в 19:53
Комментарий №1
htmldrive dry

Вовчик
0
Вовчик написал: Написано 24 Февраля 2011 в 11:59
Комментарий №2
Что?

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: