Адаптивная всплывающая подсказка на JS, лучше чем на чистом CSS

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

  • Адаптивность, — пожалуй, главное требование. К 2020 году — это уже давно стандарт, и это правильно.
  • Использование библиотеки jQuery, ничего дополнительно тянуть не нужно.
  • Оформительная часть должна базироваться на CSS с минимальным набором стилей: шрифты, цвета, отступы и другое мы адаптируем сами под текущие задачи.

Многие готовые решения основаны исключительно на каскадных таблицах CSS. Что ж, это хорошо, если адаптивность не требуется. Но нас это не устраивает. Подсказки на «чистом CSS» не могут рассчитать положение элемента на экране, и работают на основе предустановленных стилей. Именно поэтому, такие подсказки обрезаются в мобильной версии.

В некоторых решениях расположение «всплывашки» задаётся явно, вручную: через атрибуты «data-» или даже непосредственно в javascript, что очень неудобно.

Лирика. Подсказка — великолепное изобретение. Однако, идеальная подсказка — это… когда её нет. Если пользователю не нужны пояснения, интерфейс сайта построен правильно. Всё же есть случаи, когда она просто необходима.

Особенности liteTooltip.js

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

Пару моментов чисто субъективных:

  • По умолчанию подсказки должны отображаться над элементом. Пользователи читают сверху вниз, и обычно зрительно захватывают блок текста. Так мы не закрываем непрочитанную часть. Если она не влезает в область экрана, смещаем её так, чтобы она помещалась полностью.
  • Поддержка html в блоке подсказки — само собой.
  • Реализация оформительной части через JS — избыточно. Цвета, отступы и тому подобное делаем через CSS.
  • Хорошо задавать момент появления подсказки для каждого элемента в отдельности: при наведении или клике.
  • Подсказка должна рассчитывать ширину области просмотра и адаптироваться к узким экранам, выбирая наилучшее положение относительно элемента (сверху, снизу, слева, в центре, справа).

Всё это учтено в liteTooltip.

Подключение

  1. Поместите код стилей в любом месте существующего файла CSS или создайте новый. Вы также можете вставить его в HTML-файл в head, обернув код тегами <style> и </style>.
  2. Поместите код JavaScript в существующий JS-файл или создайте новый. Вы также можете вставить его в HTML-файл в head или, лучше перед закрывающим тегом body, обернув его тегами <script> и </script>.
  3. Присвойте класс class="liteTooltip" и один из атрибутов: data-tooltip-mouseover="Ваша подсказка" или data-tooltip-focus="Ваша подсказка" любому из тегов HTML-файле, где вы хотите, чтобы всплывающая подсказка появлялась при вызове. Вы можете использовать html теги для оформления, но избегайте блочных элементов.

Обратите внимание, что атрибут содержит текст подсказки и событие его вызова:

  • data-tooltip-mouseover — появление подсказки при наведении курсором на элемент.
  • data-tooltip-focus — появление при фокусировки курсора в элементе, обычно используется для полей ввода input.

Код CSS

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

.tooltip {
	background: rgba(0,0,0,.9);
	color: #fff;
	z-index: 999999;
	position: absolute;
	padding: 15px;
	max-width: 250px;
	border-radius: 2px;
}
.tooltip.animation-slide {
	-webkit-animation-name: slideTooltip;
	-webkit-animation-duration: .25s;
	-webkit-animation-timing-function: ease;
	animation-name: slideTooltip;
	animation-duration: .25s;
	animation-timing-function: ease;
}
.tooltip .tooltip-arrow {
	position: absolute;
	border: 8px solid rgba(0,0,0,.9);
}
.tooltip-arrow.bottomtotop {
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	top: -16px;
}
.tooltip-arrow.toptobottom {
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	bottom: -16px;
}
.tooltip-arrow.righttoleft {
	border-left-color: transparent;
	border-bottom-color: transparent;
	border-top-color: transparent;
	left: -16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.tooltip-arrow.lefttoright {
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-top-color: transparent;
	right: -16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.tooltip-arrow.center {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
@-webkit-keyframes slideTooltip {
	from {
		-webkit-transform: translateY(-20%);
		transform: translateY(-20%);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideTooltip {
	from {
		-webkit-transform: translateY(-20%);
		transform: translateY(-20%);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
Категории
0 комментариев
Добавить комментарий

Scroll Down
Fb. — Tw. — Vk.