Protip — один из многих плагинов всплывающих подсказок(tooltip) удовлетворяющих практически все необходимые требования которые могут возникнуть перед верстальщиком или программистом. Довольно простой, без каких-либо сверх наворотов, просто делает свое дело и делает хорошо :).

Возможности

  • 49 положений всплывающей подсказки!
  • Обновление подсказки в режиме реального времени.
  • Постоянная проверка элемента (если элемент для которого показывается подсказка удален то и сама подсказка удаляется).
  • Автопозиционирование: если подсказка будет слишком близко к краю экрана то она появится в том месте где ей хватит места.
  • Размещение: снаружи, внутри, на границе, в центре.
  • Появление при наведении, при клике или всегда открыто.
  • Возможно использовать любой html код в подсказке.
  • Интерактивные подсказки.
  • Задержка при появлении или закрытии.
  • Авто закрытие.
  • Поддержка иконок.
  • Собственные скины и размеры.
  • Поддержка анимации.
  • Наличие Callback функций.

Подключение и инициализация плагина

Файлы можно загрузить на сайт и подключить, либо подключить через репозиторий плагина:

1
2
<link rel="stylesheet" href="//cdn.rawgit.com/DoclerLabs/Protip/master/protip.min.css">
<script src="//cdn.rawgit.com/DoclerLabs/Protip/master/protip.min.js"></script>

Инициализация плагина с параметрами по умолчанию:

1
2
3
$(document).ready(function(){
    $.protip();
});

Параметры

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

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
33
// Стандартные настройки
$.protip({
    selector:           C.DEFAULT_SELECTOR,
    namespace:          C.DEFAULT_NAMESPACE,
    protipTemplate:     C.TEMPLATE_PROTIP,
    arrowTemplate:      C.TEMPLATE_ARROW,
    iconTemplate:       C.TEMPLATE_ICON,
    observer:           true,
    delayResize:        100,
    defaults:           {
        trigger: e.TRIGGER_HOVER,
        title: null,
        delayIn: 0,
        delayOut: 0,
        interactive: !1,
        gravity: !0,
        offsetTop: 0,
        offsetLeft: 0,
        position: e.POSITION_RIGHT,
        placement: e.PLACEMENT_OUTSIDE,
        classes: null,
        arrow: !0,
        width: 300,
        icon: !1,
        observer: !1,
        target: e.SELECTOR_BODY,
        skin: e.SKIN_DEFAULT,
        size: e.SIZE_DEFAULT,
        scheme: e.SCHEME_DEFAULT,
        animate: !1,
        autoHide: !1,
    }
});

ПараметрПо умолчаниюОписание параметра
selectorC.DEFAULT_SELECTORC.DEFAULT_SELECTOR = .protip. На каких элементах будет инициализироваться плагин
namespaceC.DEFAULT_NAMESPACEC.DEFAULT_NAMESPACE = pt. Описание в документации нет, из названия можно понять что это пространство имен.
protipTemplateC.TEMPLATE_PROTIPC.TEMPLATE_PROTIP =
1
<div class="{classes}" data-pt-identifier="{identifier}" style="{widthType}:{width}px">{arrow}{icon}<div class="protip-content">{content}</div></div>
Шаблон всплывающей подсказки, с этим параметром думаю нужно быть по осторожней, здесь видно что используется несколько переменных для вывода значений параметров.
arrowTemplateC.TEMPLATE_ARROWC.TEMPLATE_ARROW = span элемент. Шаблон вывода стрелки подсказки, полный код из плагина тут не написал, но его можно заменить на любой свой, главное потом стили настроить))
iconTemplateC.TEMPLATE_ICONC.TEMPLATE_ICON =
1
<em><i class="icon-{icon}"></i></em>
Шаблон вывода иконки в подсказке. Чтобы иконка работала нужно подключить иконочные шрифты, автор плагина его не предоставляет к сожалению, но можно без проблем использовать например font swesome и изменить шаблон к виду
1
<i class="fa {icon}"></i>
где {icon} будет само название иконки например fa-comment
observertrueЕсли включено то следит за изменение в DOM структуре, если элемент с которым работает плагин будет удален со страницы то и экземпляр плагина тоже удалится
delayResize100Задержка перед перепозиционированием подсказки если ее размен изменится
defaults{ }массив самых основных параметров
triggere.TRIGGER_HOVERe.TRIGGER_HOVER = hover. При каком событии будет появляться подсказка, доступны следующие варианты: hover, click, sticky
titlenullТекст подсказки. Для адаптивности подсказок разумней всего использовать data атрибут data-pt-title=»». Так же вместо текста можно указать какой-нибудь класс или id(‘.selector’ или ‘#id’) с нужным содержимым.
delayIn0Задержка в миллисекундах перед появлением подсказки
delayOut0Задержка в миллисекундах перед исчезновением подсказки
interactivefalseЕсли включена то параметр delayOut будет использовать значение 250
gravitytrueПеред показом подсказки плагин проверит, а сможет ли он ее показать в указанном положении, если нет то он ее покажет там где ее будет видно
offsetTop0Смещение подсказки по вертикале
offsetLeft0Смещение подсказки по горизонтали
positione.POSITION_RIGHTe.POSITION_RIGHT = bottom. Позиция подсказки, т.к. из много, 49 шт., опишем их в разделе ниже
placemente.PLACEMENT_OUTSIDEe.PLACEMENT_OUTSIDE = outside. Размещение всплывающей подсказки внутри элемента, варианты: outside, inside, border и center
classesnullКлассы которые будут добавлены к всплывающей подсказке
arrowtrueРегулирует отображение стрелки для всплывающей подсказки
width300Ширина подсказки, если правильно понял документацию то если указать max-width то подсказка растянется под ширину контента, а если указать число, например 300, то ширина станет фиксированной
iconfalseКласс иконки, как использовать описывал выше.
observerfalseНесмотря на одинаковое название это немного другая настройка, следит за изменение в настройках подсказки, если она включена и если изменить например текст подсказки в data атрибуте то и в подсказке текст изменится.
targete.SELECTOR_BODYe.SELECTOR_BODY = body. В какой элемент будут добавляться код всплывающий подсказок
skine.SKIN_DEFAULTe.SKIN_DEFAULT = default. Добавляет стиль к всплывающей подсказке, доступны 2 базовых стиля: square, default
sizee.SIZE_DEFAULTe.SIZE_DEFAULT = normal. Размер текста подсказки, работает только при стандартном стиле, варианты: tiny, small, normal, big, large
schemee.SCHEME_DEFAULTe.SCHEME_DEFAULT = pro. Цветовая схема подсказки, работает только при стандартном стиле, варианты: pro, blue, red, aqua, black, leaf, purple, pink, orange
animateundefinedКласс для анимации, можно использовать Animate.css.
autoHidefalseЕсли включена то подсказка будет автоматически исчезать

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

Параметр jsdata атрибут
triggerdata-pt-trigger
titledata-pt-title
delayIndata-pt-delay-in
delayOutdata-pt-delay-out
interactivedata-pt-interactive
gravitydata-pt-gravity
offsetTopdata-pt-offset-top
offsetLeftdata-pt-offset-left
positiondata-pt-position
placementdata-pt-placement
classesdata-pt-classes
arrowdata-pt-arrow
widthdata-pt-width
icondata-pt-icon
observerdata-pt-observer
targetdata-pt-target
skindata-pt-skin
sizedata-pt-size
schemedata-pt-scheme
animatedata-pt-animate
autoHidedata-pt-auto-hide

Методы

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
var el = $('.el');

// Установить подсказку на этот элемент с настройками
el.protipSet([options]);

// Показать подсказку с указанными настройками
el.protipShow([options]);

// Скрыть подсказку
el.protipHide();

// Переключение подсказки
el.protipToggle();

// Скрыть все подсказки
el.protipHideInside();

// Показать все подсказки
el.protipShowInside();

// Переключение всех подсказок
el.protipToggleInside();

// Callback функция при показе подсказки
el.on('protipshow', function(ItemInstance){});

// Callback функция при сокрытии подсказки
el.on('protiphide', function(ItemInstance){});

// Используйте console.log(ItemInstance) чтобы увидеть результат.

Примеры:

1
<div class="my-el protip" data-pt-title="Текст подсказки"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var el = $('.my-el');

// Показать подсказку
el.protipShow();

// Показать подсказку с новым текстом
el.protipShow({
    title: 'Тут новый текст подсказки'
});

// Изменить событие появления подсказки на клик
el.protipSet({
    trigger: 'click'
});

Положение

  • corner-left-top
  • top-left
  • top
  • top-right
  • corner-right-top
  • right-top
  • right
  • right-bottom
  • bottom-left
  • bottom
  • bottom-right
  • corner-right-bottom
  • left-top
  • left
  • left-bottom
  • corner-left-bottom
docs-positions
Возможно вас это заинтересует
comments powered by HyperComments