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

25 июня 2015 Антон Кулешов 4454 0

Всплывающая подсказка вещь не новая, но когда возникает необходимость реализовать у себя на странице, то часто возникает вопрос: как лучше сделать? Вариантов для реализации подсказки множество: будь-то крупные библиотеки, к примеру, jQuery или MooTools, либо готовые плагины, а кто-то просто воспользуется стандартными средствами HTML и CSS. Главное: сделать вплывающую подсказку интересной и привлекательной для пользователя.

Реклама

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

В предыдущих статьях я рассматривал похожие варианты, которые, возможно, будут вам более подходящими:

И так, давайте притупим и начнём c разметки нашей будущей подсказки:

<div class="help-tip">
	<p>
		<!-- 
			Здесь будет находиться
			 нужный нам контент
		 -->
	</p>
</div>

Теперь займёмся CSS стилями и начнем, пожалуй, с обёртки:

.help-tip{
	position: absolute;
	top: 18px;
	right: 18px;
	text-align: center;
	background-color: #bcdbea;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 14px;
	line-height: 26px;
	cursor: default;
}

При помощи позиционирования мы помещаем подсказку в нужное нам место, а также задаем стили для визуализации и общие стили для внутренних элементов.

.help-tip:before{
	content: "?";
	font-weight: bold;
	color: #fff;
}

Воспользуемся псевдоэлементом before и добавим в обёртку знак вопроса – это проинформирует нашего посетителя, о том, где можно получить поясняющую информацию.

.help-tip p{
	display: none;
	text-align: left;
	background-color: #1e2021;
	padding: 20px;
	width: 300px;
	position: absolute;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	right: -4px;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

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

.help-tip:hover p{
	display: block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.3s ease-in-out;
	animation: fadeIn 0.3s ease-in-out;
}

Пользователь наводит курсор на подсказку, а мы показываем спрятанный контент. Для того чтобы добавить плавность используем свойство из CSS3 animation.

.help-tip p:before{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: #1e2021;
	right: 10px;
	top: -12px;
}

И завершающая часть - это добавление стрелочки.

Обещал три, а сделали вроде, как только одну – метод универсален, в обертку можно класть все что угодно, даже солидный кусок HTML кода, если, конечно, изрядно попотеть с подгонкой стилей:

<div class="help-tip">
	<p>
		Это подсказка с <b>HTML кодом!</b>
		<a href="http://falbar.ru/">и ссылками!</a>
		Вы сможете сделать
		<i><strike>намного больше</strike></i>!
	</p>
</div>

Для картинки:

<div class="help-tip">
	<p>
		Это подсказка с картинкой внутри!
		<br>
		<br>
		<img width="300" src="balloon.jpg" />
	</p>
</div>

Как видите, сделать всплывающую подсказку оказалось не так уж сложно, и, в нашем случае, мы обошлись без использования JavaScript, что иногда имеет смысл. Перейдя по ссылке «демо» вы сможете ознакомиться с тремя случаями использования данного кода.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Реализуем всплывающие сообщения без использования JavaScript

25 июля 2015 Антон Кулешов

Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.

Интегралы больше не проблема

5 января 2016 Антон Кулешов

Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.

1em или 16px

31 октября 2015 Антон Кулешов

1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!