Приветствую Вас Гость • Регистрация • Вход
Воскресенье, 22.9.2019
Главная » 2013 » Апрель » 7 » Всплывающие окна с подсказками (ToolTip)
08:26
Всплывающие окна с подсказками (ToolTip)
Не редко случаются такие ситуации, когда крайне необходимо дополнить какие то сложные элементы сайта пояснительными подсказками.
Вариантов таких подсказок много,начиная от JavaScript и заканчивая jQuery.Но самый простой вариант я считаю в таком случае — использовать окна с подсказками, так называемые ToolTips.
Они появляются при наведении мышки на нужные элемент и доносят до пользователя необходимую информацию.
Мы же в нашем случае как раз и создадим такие всплывающие подсказки но только с помощью чистого CSS.
Когда вам нужно объяснить какую-либо аббревиатуру или акроним, дать определение слову или просто сообщить какие-либо детали об объекте на который наведен указатель мыши окна с подсказками являются самым простым и в то же время эффективным средством.
Стоит учесть и самое главное достоинство наших подсказок,а именно то,что подсказки создание которых мы разберем в этой статье, будут работать во всех браузерах.
В старых браузерах (IE 8 И ниже), возможно, они будут выглядеть хуже, так как там не будет поддержки некоторых свойств CSS3 (мы будем использовать border-radius и box-shadow).
Сегодня мы будем разсматривать 5 разных типов окон с подсказками.
Все они будут выглядеть интересно, и Вы так же сможете их сразу применить в своих проектах скачав готовый исходник.
Для начала создадим HTML заготовку (каркас) для наших всплывающих окон.
Код будет выглядеть вот так:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Всплывающие окна с подсказками - ToolTips</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Всплывающие окна с подсказками - ToolTips" /> <meta name="keywords" content="Всплывающие,окна,подсказки,ToolTips,CSS" /> </head> <body> <h2 style="border: 0; padding: 0;">Всплывающие окна с подсказками - ToolTips</h2> Здесь представлены различные примеры всплывающие окон с подсказками реализованными на CSS3. Это всего лишь простейшие примеры. Используйте их для создания собственных!
<a class="tooltip" href="#">Классическое<span class="classic">Это всего лишь простейшие примеры. Используйте их для создания собственных!</span></a>
<a class="tooltip" href="#">Критическая ошибка<span class="custom critical"><img src="critical.png" style="width:32px;height:32px;" alt="Eror" /><em>Критическая ошибка</em>Это всего лишь простейшие примеры. Используйте их для создания собственных!</span></a>
<a class="tooltip" href="#">Помощь<span class="custom help"><img src="help.png" style="width:32px;height:32px;" alt="Help" /><em>Помощь</em>Это всего лишь простейшие примеры. Используйте их для создания собственных!</span></a>
<a class="tooltip" href="#">Информация<span class="custom info"><img src="info.png" style="width:32px;height:32px;" alt="Info" /><em>Информация</em>Это всего лишь простейшие примеры. Используйте их для создания собственных!</span></a>
<a class="tooltip" href="#">Предупреждение<span class="custom warning"><img src="warning.png" style="width:32px;height:32px;" alt="Warning" /><em>Предупреждение</em>Это всего лишь простейшие примеры. Используйте их для создания собственных!</span></a>
</body> </html>

Как видно из кода, мы имеем заголовок h1, абзац с текстом p, в котором содержаться анкоры a с различными стилями tooltip. После того, как мы добавим описание стилей, тот текст, что заключен в тег будет невидим до того момента, пока мы не наведем на анкор указатель мыши. Каждый тег имеет свой класс, что позволит нам создать различные варианты окон с подсказками.
Далее для наглядности зададим в таблице стилей для анкоров нижнюю границу (dotted) и поменяем курсор мыши на стрелку с вопросом. Мы используем здесь так же свойство outline чтобы ссылка была не похожа на обычную кликабельную ссылку. Если же вам нужно чтобы подсказка выводилась у реальной ссылки, вы можете убрать это свойство. Так же для скрытия подсказки мы использовали отрицательное значение margin. Делается для того, чтобы данный вариант работал даже в старых браузерах.
После всего этого нам остается добавить только код в CSS, который будет выводить наши окна с подсказками.
Код будет выглядеть следующим образом:
Код
  <style type="text/css">
  .tooltip {border-bottom: 1px dotted #fff; color: #781678; outline: none;cursor: help; text-decoration: none;position: relative;}
  .tooltip span {margin-left: -999em;position: absolute;}
  .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);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; }
   * html 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>

Строка * html a:hover использует HTML хак для IE6 чтобы обеспечить прозрачный фон в этом стареньком браузере.
Категория: CSS | Просмотров: 1836 | Добавил: Samosval |Рейтинг: 5.0/1


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика