Обновлённый плагин nTooltip 2.0, отображается сплывающее подсказка при наведении курсором на элемент

Написали плагин который будет выводить всплывающее сообщение над элементом, будь это кнопка или ссылка. При наведении или клик на элемент будет выводить всплывающий блок с информацией. Блок адаптируется при изменении размеров экрана устройства. Внизу есть пример в gif анимации и код как это работает.

nTooltip работает на jquery!!!

Скачать плагин 2.0 nTooltip архивом:

скачать из github

[инфа о файлах]

Исходная разметка html:

Исходный код javascript:

Сможете сами проверить:

Перейти на страницу

Аттрибуты в элементе

data-placement="left" - Размещение блока
data-original-title=“test text“ - Содержимое внутри блока tooltip

Опции

Глобальные опции

1. Выравнивание блока:

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

По умолчанию: align: center
align: left
align (тип string)

Есть список которые принимает свойство align:

center - Выравнивает по центру

top - Выравнивает на верх

bottom - Выравнивает по низу

left - Выравнивает влево

right - Выравнивает вправо

2. Размещение блока:

1) В свойство placement указываем как будет размещаться блок над элементом

По умолчанию: placement: top
placement: left
placement (тип string)

Есть список которые принимает свойство placement:

top - Выводит сверху

bottom - Выводит снизу

left - Выводит слева

right - Выводит справа

или в атрибуте: data-placement="left"

3. Создание блока:

1) указываем название элемента в котором будет создаваться блок «Всплывающей подсказки», по умолчанию блок создается внутри тега body

По умолчанию: elem_global: ‘body’
elem_global: .box
elem_global (тип string)

Было:

Стало:

4. Смещение блока

1) Если блок хотим сместить как сверху или снизу при появлении, укажем свойства top и left

По умолчанию: top: 0
top: 15
top (тип integer)

По умолчанию: left: 0
left: 15
left (тип integer)

5. Время появления блока (анимация)

1) При наведении или клик курсором по элементу отображается блок с определенной скоростью. Это считается базовое время выполнения анимации блока.

По умолчанию: time: 450
time: 1000
time (тип integer)

6. Изменение координат вывода блока (перерисовка)

1)Если изменился размер экрана браузера, срабатывает перерисовка координат созданного блока, только в том случаи если свойство resize принимает true

По умолчанию: resize: true
resize: true
resize (тип boolean)

7. Появление и исчезновение блока

1)Есть два свойства с помощью которых можно включать и отключать выполнения события появления и исчезновение блока, это свойства start_elem и stop_elem

По умолчанию: start_elem: true
start_elem: true
start_elem (тип boolean)

По умолчанию: stop_elem: true
stop_elem: false
stop_elem (тип boolean)

Управление курсором

1. Устанавливаем событие на элемент

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

По умолчанию: cursor.event: hover
cursor.event: click
cursor.event (тип string)

Есть список которые принимает свойство cursor.event:

hover - При наведении на элемент

click - При клике на элемент

2. Курсор в элементе или в блоке

1)После появления блока можно будет переносить курсор на созданный блок, при этом блок пропадать не будет — это свойство is_over

По умолчанию: cursor.is_over: true
cursor.is_over: false
cursor.is_over (тип boolean)

Изменяем появившийся блок

1. Название блока

1) Когда блок создается в нем применяется название nTooltip к id и классам, если присутствует конфликт с версткой по этому названию, можно будет его поменять. По этому названию работает сам плагин.

По умолчанию: elem.name: nTooltip
elem.name: testTooltip
elem.name (тип string)

Это будет так

2. Ширина блока

1) Понабилось поменять размер блока есть свойство width, в верстке применяется этот размер как max-width, для свободной адаптивности.

По умолчанию: elem.width: 150
elem.width: 250
elem.width (тип integer)

3. Содержимое внутри блока

1) Выводим что то внутри блока, к примеру какой нибудь html, title, text, есть свойство html.

По умолчанию: elem.html: undefined
elem.html: ‘test text’
elem.html (тип string, undefined)

или указать в атрибуте data-original-title=“test text“. Приоритет будет выше у js

2) Есть дополнительный вывод для каких нибудь иконок, это html_before.

По умолчанию: elem.html_before: ''
elem.html_before: 'icon'
elem.html_before (тип string)

3) Есть дополнительный вывод для каких нибудь иконок, это html_after.

По умолчанию: elem.html_after: ''
elem.html_after: 'icon'
elem.html_after (тип string)

4. Стили блоку

1) Применяем стили появившимся блоку

По умолчанию: elem.style: { 'opacity': '0', 'z-index': '9999', 'position': 'absolute', 'width': '100%' }
elem.style: { 'background': 'red' }
elem.style (тип json)

5. Функции событий блока

1) Выполняются события элемента в процессе появления и исчезновения блока, работают 2 функции, eventStart, eventStop

По умолчанию: elem.eventStart: function(self, self_elem, options){}
elem.eventStart: function(self, self_elem, options){}
elem.eventStart (тип function)

По умолчанию: elem.eventStop: function(self, self_elem, options){}
elem.eventStop: function(self, self_elem, options){}
elem.eventStop (тип function)

Before элемент в блоке

1. Отображение before элемента в блоке

1) Отображать или не отображать before элемент внутри блока

По умолчанию: before.display: true
before.display: false
before.display (тип boolean)

2. Размеры before

1) Указываем размеры before элемента в нутри блока

По умолчанию: before.width: 15
before.width: 10
before.width (тип integer)

По умолчанию: before.height: 15
before.height: 10
before.height (тип integer)

3. Содержимое в before

1) Выводим что то внутри before элемента, к примеру какой нибудь html, title, text, есть свойство html.

По умолчанию: before.html: ''
before.html: ''
before.html (тип string)

4. Стили для before элемента

1) Применяем стили для befor элемента

По умолчанию: before.style: { 'opacity': '0', 'z-index': '9999', 'position': 'absolute', 'width': '100%' }
before.style: { ‘background’: ‘red’ }
before.style (тип json)

5. Функции событий before элемента в блоке

По умолчанию: before.eventStart: function(self, self_elem, options){}
before.eventStart: function(self, self_elem, options){}
before.eventStart (тип function)

По умолчанию: before.eventStop: function(self, self_elem, options){}
before.eventStop: function(self, self_elem, options){}
before.eventStop (тип function)

Анимация

1. Активность анимации

1) Задействовать анимацию что бы работало, соответственно можно отключить если свойство active примет false

По умолчанию: animation.active: true
animation.active: false
animation.active (тип boolean)

2. Перемещение блока

1) Эффект перемещения блока с предыдущего элемента на котором было ранее отображено

По умолчанию: animation.moving: true
animation.moving: true
animation.moving (тип boolean)

3. Увеличение или уменьшение блока, и время выполения

1) При наведении или клик по элементу отображается блок с эффектом увеличения или иначе уменьшается

По умолчанию: animation.scale: true
animation.scale: true
animation.scale (тип boolean)

2) Отключим только увеличение блока при появлении

По умолчанию: animation.scale_start: true
animation.scale_start: false
animation.scale_start (тип boolean)

3) Отключим только уменьшение блока

По умолчанию: animation.scale_stop: true
animation.scale_stop: false
animation.scale_stop (тип boolean)

4) Устанавливаем время увеличение или уменьшение блока, по умолчанию время берется базовое если animation.time_scale принимает значение undefined

По умолчанию: animation.time_scale: 600
animation.time_scale: 1000
animation.time_scale (тип integer, undefined)

4. Стили выполняемые в процессе выполнения анимации, выполняется анимация от и до. Это будет to_1_css до end_2_css

1) to_1_css — применяется стиль до отображения блока

По умолчанию: animation.to_1_css: { ‘opacity’: ‘0’ }
animation.to_1_css: {‘opacity’: ‘0’}
animation.to_1_css (тип json)

2) to_2_css — применяется стиль когда блок отобразился

По умолчанию: animation.to_2_css: { ‘opacity’: ‘1’ }
animation.to_2_css: {‘opacity’: ‘1’}
animation.to_2_css (тип json)

3) end_1_css — применяется стиль когда блок начал пропадать

По умолчанию: animation.end_1_css: { ‘opacity’: ‘1’ }
animation.end_1_css: {‘opacity’: ‘1’}
animation.end_1_css (тип json)

4) end_2_css — применяется стиль когда блок уже собирается уничтожаться

По умолчанию: animation.end_2_css: { ‘opacity’: ‘0’ }
animation.end_2_css: {‘opacity’: ‘0’}
animation.end_2_css (тип json)

5. Функции событий анимации блока

1) Выполняются события блока в процессе появления и исчезновения блока, работают 2 функции, eventStart, eventStop

По умолчанию: animation.eventStart: function(self, self_elem, options){}
animation.eventStart: function(self, self_elem, options){}
animation.eventStart (тип function)

По умолчанию: animation.eventStop: function(self, self_elem, options){}
animation.eventStop: function(self, self_elem, options){}
animation.eventStop (тип function)