Css при наведении подсказка – Как показывать див около курсора мыши, при наведении на какой-либо блок? — Хабр Q&A

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

Удобный, интуитивно понятный и со вкусом оформленный сайт – это главная цель любого веб-разработчика. Но что делать, если мощный функционал Вашего проекта значительно усложняет пользовательский интерфейс, и без подсказок посетителю будет ложно сориентироваться? Или Вы создаете сайт с легким элегантным дизайном и не хотите загромождать его лишней информацией, но без этой «информации» не обойтись?

Одним из наиболее часто применяемых способов увеличить информативность сайта, не навредив при этом дизайну, являются всплывающие подсказки.

Всплывающие подсказки CSS

Предпосылки

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

Сегодня мы рассмотрим построение кросс-браузерных всплывающих при наведении подсказок на чистом CSS.

Зачем изобретать велосипед, спросите Вы? Ведь в HTML есть атрибут title, позволяющий выводить подсказку при наведении. Но вся соль в том, что темизация такой подсказки не представляется возможной. Такой порядок вещей приводит нас к необходимости самим создать всплывающие подсказки.

Создаем всплывающую подсказку сами

Итак, всплывающая подсказка. Для лучшего понимания материала, предлагаю учиться на рабочем примере. Напишем простой HTML код:

CSS:

<a href="#"><span>
<img src="../css/image/info.jpeg" alt="Информация" />
<em>Акция!</em>
Заказав этот товар, вы получаете бесплатную доставку по Украине!</span>
Купить</a>

Как видим, у нас есть ссылка «Купить» с классом .tooltip, который в дальнейшем поможет нам управлять поведением всплывающей при наведении подсказки (почему именно ссылка – читайте подпункт «Важно»). Внутри нее размещаем span в котором будет содержаться выводимая информация. Для придания «современности» дизайна, добавлена картинка. В нашем примере картинка лежит в директории "../css/image/ " относительно html страницы.

Теперь зададим базовую стилизацию.

CSS:

.tooltip {
position: relative;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span {
visibility: hidden; /*прячем подсказку*/
position: absolute; 
bottom: 30px;
z-index: 999;
width: 280px;
margin-left: -127px;
padding: 10px;
opacity: .9; /*устанавливаем прозрачность*/
background-color: darkturquoise; /*Задаем цвет фона*/
text-align: justify;
font-weight: bold;
}
.tooltip:hover {
border: 0; /* Фиксим появление бага в IE6*/
}
.tooltip:hover span {
visibility: visible; /*Задаем поведение: отобразить при наведении*/
}

Обратите внимание на строчку

при наведении на ссылку, стандартный системный курсор изменяет свой вид, и тем самым подсказывает пользователю, что сейчас он получит дополнительную информацию.

Вот что у нас получилось:

Исходная всплывающая подсказка

Такая всплывающая подсказка будет работать даже в древних браузерах. Но мы не будем отставать от прогресса, и используем возможности современных браузеров.

Создадим линейный градиент при помощи linear-gradient, и зададим border-radius для округления углов блока. Для придания эффекта объемности добавим тень для текста и подсказки в целом.

Вставляем внутрь .tooltip span

следующий код.

CSS:

border: 3px solid mediumturquoise;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);

Сравним полученный результат с предыдущим:

Всплывающая подсказка

При желании, опять-таки для придания объемности, можно визуально вынести картинку за пределы подсказки. Текст внутри тоже можно немного причесать.

CSS:

.tooltip img {
position: absolute;
left: -24px;
top: -24px;
float: left;
}
em {text-align: center;
display: block;
font-weight: bolder;
}

Всплывающая подсказка

Как для учебного примера, то получилось, в принципе, неплохо. Но я уверен, что у вас получится значительно лучше!

Но что делать, если Вам необходимо визуально указать, с какого именно элемента выскочило сие чудо? Дорисуем стрелочку при помощи псевдоэлементов.

CSS:

.tooltip span:before,
.tooltip span:after	{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid darkturquoise;/*цвет стрелочки*/
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: mediumturquoise; /*обрамление стрелочки*/
bottom: -8px;
}

Всплывающая подсказка

При оформлении стрелочки, обратите внимание на комментарии, они помогут Вам быстро настроить цветовую схему.

Вот пример черной стрелки с золотым обрамлением:

Всплывающая подсказка

Важно!!!

  1. Кросс-браузерность. Всплывающие подсказки такого типа корректно работают во всех современных браузерах (начиная с IE6, Fx-4, Op-9.5, Sf-4, Cr).

    Если вы создаете подсказки со стрелочками, то для IE6-7 придется эмулировать псевдоэлементы before, after.

  2. Почему ссылка? Дело в том, что IE6 относительно корректно отрабатывает свойство :hover лишь в том случае, когда оно применяется к ссылке. Если вы не оптимизируете свой сайт под такую древность – можете использовать другие теги (например, span).
  3. При желании, Вы можете использовать js-код для расширения функционала и/или задания особых эффектов (например, медленное появление и исчезновение и т.д.).

Общие замечания

  • Обратите внимание на фон страницы, на которой мы выводили подсказки. Он не является однообразным, и на нем полупрозрачная подсказка приобретает некую изюминку. Учтите этот момент при подборе фона документа.
  • Вас могло заинтересовать, зачем элементу span было присвоено класс «
    customInfo
    ». Дело в том, что на своем сайте Вам может понадобится несколько типов информационных подсказок, отличающихся цветовой схемой, градиентом и т.д. Для этого удаляем из «.tooltip span» свойства, которые мы хотим изменить, например
    border: 3px solid mediumturquoise;
    opacity: .9;
    background-color: darkturquoise;

    и оформляем новый класс:

    .customWorring {
    border: 3px solid red;
    opacity: .8;
    background-color: pink;
    }

    Таким образом мы получим розовую полупрозрачную подсказку с красной окантовкой. Изменим картинку в теле ссылки на красный восклицательный знак, – и предостерегающая подсказка готова.

  • Ну и напоследок, личное мнение автора – подсказки на чистом CSS – это вещь! Вам не нужно играться с готовыми js-скриптами, подключать внешние файлы, ваши странички не теряют скорости загрузки. А самое главное – кросс-браузерная всплывающая подсказка создана собственными руками, и пределов для ее кастомизации практически нет.

Оценок: 4 (средняя 5 из 5)

Как создать подсказки при наведении



Узнать, как создать подсказки при наведении с помощью CSS.


Наведите курсор на текст ниже:

СверхуТекст подсказки

СправаТекст подсказки

СнизуТекст подсказки

СлеваТекст подсказки

Редактор кода »


Подсказки при наведении

Шаг 1) Добавить HTML:

Пример

<div>Наведите курсор на меня
  <span>Текст подсказки</span>
</div>



Шаг 2) Добавить CSS:

Пример

/* Контейнер подсказок */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Если вы хотите, чтобы точки под перемещаемым текстом */
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Расположите текст подсказки */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Исчезают в подсказке */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Подсказка стрелка */

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Отображение текста подсказки при наведении курсора мыши на контейнер подсказки */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Редактор кода »

Совет: Зайдите на наш учебник CSS Подсказки чтобы узнать больше о подсказках.

Совет: Чтобы создать "кликабельные" подсказки, перейдите на наш учебник Как сделать - Всплывающие окна

Совет: Модели также похожи на подсказки. Зайдите на наш учебник Как сделать - Модель чтобы узнать о моделях.


Как сделать всплывающие подсказки на HTML и CSS3 при наведении

Всплывающие подсказки помогут украсить ваш сайт, а также сделать его отзывчивым и современным. В данном примере есть несколько вариантов, среди которых можно выбрать самый подходящий вашему проекту!

Подсказки позволяют заинтересовать пользователя, а также сократить используемую область на сайте, тем самым достаточно ёмко и элегантно оформить всю необходимую информацию. Такой вариант идеально подходит к продающей странице, где необходимо максимально точно и кратко представить информацию пользователю.

К тому же, всплывающие подсказки могут быть незаменимым вариантом в крупном проекте, в котором усложнена навигация по сайту. Именно подсказки помогут решить эту проблему: к примеру, пользователь может навести на фразу или элемент сайта, а ему будет выведена краткое её обозначение. Удобно, не правда ли?

Я представляю вам очень удобный и функциональный пример, который реализован только на чистом HTML и CSS3, что несомненно является большим плюсом и гарантирует беспроблемную установку на  проект любой сложности. К тому же, в нём используются современные SVG-иконки, о которых я уже писал в статье про Dashicons в WordPress.

Стоит отметить, что всплывающие подсказки в данном примере являются адаптивными (как и сами примеры), что сокращает ваше потраченное время. Именно поэтому я считаю этот вариант самым оптимальным и удобным для всех нас.

 

Как установить всплывающие подсказки

Как я уже говорил — установка не составит труда, так как никаких «танцев с бубном» здесь не будет.

ПРИМЕР СКАЧАТЬ

 

Давайте рассмотрим все тонкости установки всплывающих подсказок на примере «Растянутая». Для начала разберемся с HTML-документом, а именно с блоком <head>:

<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/tooltip-bloated.css" /> </head>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="css/tooltip-bloated.css" />

</head>

Строка 2 — уже привычный нам мета-тег для корректного отображения на Iphone. Если не знаешь что это — читай мою статью про медиа-запросы.

Строка 3-4 — подключаем необходимые стили. demo необходим для нашего демо.

Строка 5 — подключаем файл стилей для шрифта наших примеров. Точнее он необходим для корректного отображения наших SVG-иконок.

Строка 6 — подключаем таблицу стилей конкретно к нашему примеру («Растянутая»).

Собственно, всё что нам необходимо — мы подключили. Остаётся дело за малым — разобраться со структурой нашего <body>:

<body> <div> <div> <span><a title="На сайт" target="_blank" href="http://www.drogin.ru"><span>Вернуться на сайт</span></a></span> </div> <div> <header> <h2>Оформление подсказок</h2> <nav> <a href="index.html">Классик</a> <a href="round.html">Круг</a> <a href="curved.html">Изогнутая</a> <a href="sharp.html">Острая</a> <a href="bloated.html">Растянутая</a> <a href="box.html">Блок</a> <a href="comic.html">Забавная</a> <a href="line.html">Линия</a> <a href="flip.html">Разворот</a> </nav> </header> <div> <ul> <li><a href="#"><i></i><span>Автомобиль</span></a></li> <li><a href="#"><i></i><span>Велосипед</span></a></li> <li><a href="#"><i></i><span>Пассажирский самолет</a></li> <li><a href="#"><i></i><span>Автобус</span></a></li> <li><a href="#"><i></i><span>Истребитель</span></a></li> </ul> </div> </div> </div> </body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<body>

<div>

<div>

<span><a title="На сайт" target="_blank" href="http://www.drogin.ru"><span>Вернуться на сайт</span></a></span>

</div>

<div>

<header>

<h2>Оформление подсказок</h2>

<nav>

<a href="index.html">Классик</a>

<a href="round.html">Круг</a>

<a href="curved.html">Изогнутая</a>

<a href="sharp.html">Острая</a>

<a href="bloated.html">Растянутая</a>

<a href="box.html">Блок</a>

<a href="comic.html">Забавная</a>

<a href="line.html">Линия</a>

<a href="flip.html">Разворот</a>

</nav>

</header>

<div>

<ul>

<li><a href="#"><i></i><span>Автомобиль</span></a></li>

<li><a href="#"><i></i><span>Велосипед</span></a></li>

<li><a href="#"><i></i><span>Пассажирский самолет</a></li>

<li><a href="#"><i></i><span>Автобус</span></a></li>

<li><a href="#"><i></i><span>Истребитель</span></a></li>

</ul>

</div>

</div>

</div>

</body>

Всё, что находится до 20 строки — нас не должно волновать, так как в том блоке находится навигация и прочие элементы, которые необходимы для удобного пользования демо. Нам интересно всё, что находится в блоке с классом dummy.

Не стоит удалять какой-либо из классов в примере, так как это приведёт к неминуемой ошибки. Если вам необходимо как либо изменить стиль любого из элементов, не прибегая к редактированию подключенных нами ранее библиотек — следует дописать свой класс или идентификатор. Как вы уже заметили, структура подсказки незамысловатая — всё реализована с помощью тегов списка ul и li. Не нужно изменять её, так как ни к чему хорошему это не приведёт.

Единственное, что следует редактировать:

<span>Автобус</span>

<span>Автобус</span>

Данный фрагмент кода я изъял из нашего списка <li>. Именно данный фрагмент отвечает за вывод текста нашей подсказки. Вместо «Автобус» можно написать то, что вам необходимо — и готово! Аналогично изменяем и элементы списка <li> — вот вам и готовая качественная всплывающая подсказка без единого скрипта.

 

Вывод

Таким образом, мы получили отличный вариант всплывающих подсказок, реализованных только на HTML и CSS3. Хотелось бы отметить, что мы рассмотрели лишь 1 вариант оформления подсказок, а в демо их целых 9! Ассортимент самых разных подсказок придет по вкусу каждому веб-мастеру и не останется без внимания ваших пользователей.

Процесс установки и редактирования всплывающей подсказки не займет более 10 минут, но взамен мы получаем:

  • повышение поведенческого фактора;
  • ёмкое оформление;
  • возможность повышения конверсии.

Это незаменимый вариант для продающей страницы, так как сочетает в себе все самые лучшие черты, которые характерны качественным проектам, способные работать по своему назначению лучше других аналогов.

 

 


Вконтакте

Facebook

Twitter

Google+

E-mail

Это интересно

Подписаться на новости

Всплывающая подсказка с собственным стилем, используя только HTML + CSS

Автор: Администратор

Просмотров: 4649

Теги: css, html, css3

В этой статье мы расскажем о том, как сделать красивую всплывающую подсказку только средствами HTML и CSS.

Ранее мы уже написали статью Всплывающая подсказка с собственным дизайном и стилем, но данная статья рассматривает создание при помощи jQuery. Для некоторых это не приемлемый вариант или им попросту нет необходимости использовать эту библиотеку.

Сразу оговоримся, данный метод будет работать только для двойных тегов (которые имеют открывающий и закрывающие теги).

Суть будет состоять в том, что внутрь тега, которому необходимо добавить всплывающую подсказку с уникальным дизайном мы будем помещать скрытый блок, который будет появляться при наведении.

Подготовим разметку для примера:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<p>Наведи на этот текст, чтобы увидеть подсказку<span>Всплывающая подсказка</span></p>
</body>
</html>

И соответствующие стили:

body {
	margin:70px 0 0 10px;
}

.tooltip {
	/* задаем стиль внешнего вида */
	padding:10px;
	border:1px solid #333;
	background:#666666;
	color:#fff;
	
	/* скрываем */
	display:none;
	
	/* размещаем прямо над текстом-родителем */
	bottom:101%;
	left:0;
	position:absolute;
}

	/* при наведении - показываем подсказку */
	p:hover .tooltip {
		display:block;
	}

p {
	/* обязательно, иначе подсказка уедет */
	position:relative;
}

Вроде бы вот и всё, но у этого способа есть очень много недочетов, некоторые из них:

  1. Если на странице будет два одинаковых элемента с такой подсказкой, то при наведении появятся все подсказки (решается - добавлением каждому элементу уникального класса, как следствие увеличивается html и css код)
  2. Задать отображение подсказки в правом верхнем углу, относительно текста можно, только если родительский блок подсказки занимается полностью текстом (решение - подгонять блоки по ширине под текст, например div).

Но способ хорошо работает, например для ссылок(они сжимаются по тексту), а если вам нужно сделать подсказку только для одной или нескольки ссылок, то он так же вполне подойдет, не наполняя код лишними классами и селекторами.

Пример вы можете посмотреть на демо-странице:

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

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