Показать Меню
falbar WebUI Popover

Как сделать всплывающие подсказки. Разбираемся с WebUI Popover

WebUI Popover

В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности windows 3.11 (если кто помнит), и прочно закрепилась во всех приложениях, нацеленных на работу с пользователем – всплывающие подсказки.

Действительно, сегодня ни одна программа не обходится без всплывающих окон с поясняющим текстом, веб-приложения и страницы сайта – не исключение. Дизайн страницы не всегда позволяет разместить на кнопке или, скажем, пункте меню всю необходимую информацию: излишне длинные надписи просто разрушат всю HTML-разметку, с этим мы и боремся, используя всплывающие подсказки. Согласитесь, никто не станет читать ваш блог или пользоваться сервисом, если Вы не предоставите ему удобный и понятный интерфейс.

Сегодня в сети можно найти большое количество реализованных с помощью jQuery библиотек tooltip, мы же с Вами рассмотрим одну, на мой взгляд, самую простою и удачную реализацию данного плагина. Называется она WebUI Popover и живет она здесь - WebUI Popover.

Скачиваем, закидываем на сайт и подключаем к нашему документу - всего 5 минут времени и пока 3 строчки кода:

<link href="jquery.webui-popover.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.webui-popover.min.js" type="text/javascript"></script>

Как видим, стили CSS у нас уже прописаны авторами плагина, свои стили можно переназначить в настройках плагина - об этом ниже.

Далее прикручиваем наш скрипт к нужному элементу:

$("#testButton").webuiPopover(options);

Здесь #testButton – id элемента, при наведении на который, хотим вызвать подсказку. Также можно использовать как класс, так и просто тег. Последнее неудобно, я думаю, сами понимаете почему. Вместо «options» перечисляем необходимые настройки – они ниже. Важно! Должна быть указана хотя бы одна настройка – иначе работать ничего не будет.

Теперь по настройкам. Оригинальную версию мануала смотрим тут - WebUI Popover Options.

  • placement: 'auto' - отвечает за позиционирование всплывающей подсказки относительно базового элемента. Свойство может принимать одно из следующих значений: auto, top, right, bottom, left, top-right, top-left, bottom-right, bottom-left. По умолчанию скрипт будет пытаться угадать более лаконичное расположение подсказки, чаще всего это ему удается. По крайней мере, окошко не появится за пределами видимой пользователем области;
  • width: 'auto' – указываем ширину нашего окошка в пикселях (просто число без размерности: 300, 400 и т.п);
  • height: 'auto' – высота, аналогично ширине;
  • trigger: 'click' – выбираем режим появления подсказки. Всего два варианта: 'click' – сработает при клике мышью, и 'hover' – при наведении курсора;
  • style: ' ' – по умолчанию получаем светлое окошко. Можно указать значение 'inverse', тогда увидим темное окошко. Также можно прописать свои стили. Для этого создаем в CSS файле плагина класс с названием webui-popover-'название', а параметру передаем 'название';
  • constrains: null – вспомогательная настройка позиционирования, используется, только если placement указано как 'auto'. Имеет два параметра: 'horizontal' – подсказка будет выводиться по горизонтали, 'vertical' – по вертикали;
  • delay: {show: null, hide: 300} – свойство отвечает за время появления (show) и исчезновения(hide) всплывающей подсказки, время задается в миллисекундах, либо null – мгновенно. Работает только если у trigger задано значение 'hover';
  • async: {before: function(that, xhr) {}, success: function(that, data) {}}, - опция для продвинутых пользователей. Плагин имеет встроенный ajax обработчик и может работать с пользовательскими функциями. При выборе метода 'Before' функция отработает до отправки данных на сервер, 'success' – оперируем с полученными данными с сервера.
  • cache: true - отвечает за хранение данных в кэше, ели выставить значение 'false' подсказка будет каждый раз создаваться заново;
  • multi: false – запрещаем или разрешаем ('true') показ сразу нескольких окошек;
  • arrow: true – показываем стрелочку, 'false' – не показываем;
  • title: ' ' – прописываем название всплывающей подсказки, если оставим пустым, то область под заголовок отрисовываться не будет;
  • content: ' ' – собственно, то ради чего и стараемся – вводим текст подсказки;
  • closeable: false – поставим значение 'true' и у окошка подсказки появится крестик для его закрытия;
  • padding: true – задает отступ у контента, при значении 'false' отступы пропадут;
  • type: 'html' – выбираем тип выводимых данных. Принимает значения 'html' – по умолчанию, 'inframe' и 'async' – для вывода медиаконтента и пользовательских функций;
  • url: ' ' – указываем адрес, если грузим данные с других источников.

Пример использования:

HTML:

<div id="testButton">Наведи на меня</div>

jQuery:

$("#testButton").webuiPopover({
	placement: "top",
	title: "Заголовок",
	content: "<a href='http://falbar.ru/' target='_blank'>falbar.ru</a>",
	trigger: "hover",
	delay: {
		show: 1,
		hide: 300
	}
});

Пример можно увидеть, перейдя по ссылке «демо» или скачав архив к этой статье. Если перейти по это ссылке – другие примеры. Можно увидеть и поиграться с настройками плагина.

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

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

Комментариев еще не оставлено