Updated plugin nTooltip 2.0, popup tooltip is displayed when hovering over an element

We wrote a plugin that will display a pop-up message above an element, be it a button or a link. When you hover or click on an element, it will display a pop-up block with information. The block adapts when the device screen is resized. Below there is an example in gif animation and a code of how it works.

nTooltip is powered by jquery !!!

Download plugin 2.0 nTooltip archive:

download github

[info about files]

Original html markup:

Javascript source code:

You can check it yourself:

Go to page

Attributes on the element

data-placement="left" - Block placement
data-original-title=“test text“ - Content inside the tooltip block

Options

Global options

1. Block alignment:

1) Determines the alignment of the block, depending on its placement above the element, that is, if the property placement other values for placement will come.

Default: align: center
align: left
align (type string)

There is a list that the property takes align:

center - Aligns to center

top - Aligns to top

bottom - Aligns to the bottom

left - Aligns left

right - Aligns right

2. Block placement:

1) In property placement specify how the block will be placed over the element

Default: placement: top
placement: left
placement (тип string)

There is a list that the property takes placement:

top - Displays from above

bottom - Outputs from below

left - Displays on the left

right - Displays on the right

or in the attribute: data-placement="left"

3. Block creation:

1) specify the name of the element in which the "Tooltip" block will be created, by default the block is created inside the tag body

Default: elem_global: ‘body’
elem_global: .box
elem_global (тип string)

It was:

Has become:

4. Block offset

1) If we want to move the block both above or below when it appears, we will specify the properties top and left

Default: top: 0
top: 15
top (тип integer)

Default: left: 0
left: 15
left (тип integer)

5. Block appearance time (animation)

1) When you hover or click on an element, a block is displayed at a certain speed. This counts as the base time for block animation.

Default: time: 450
time: 1000
time (type integer)

6. Changing the coordinates of the block output (redrawing)

1)If the browser screen size has changed, the redrawing of the coordinates of the created block is triggered, only if the property resize takes true

Default: resize: true
resize: true
resize (type boolean)

7. Block appearance and disappearance

1)There are two properties with which you can enable and disable the execution of the block appearance and disappearance event, these are properties start_elem and stop_elem

Default: start_elem: true
start_elem: true
start_elem (type boolean)

Default: stop_elem: true
stop_elem: false
stop_elem (type boolean)

Cursor control

1. Setting an event on an element

1)When performing various manipulations with an element, there is a property event, with which you can set the event executed by the cursor over the element.

Default: cursor.event: hover
cursor.event: click
cursor.event (тип string)

There is a list that the property takes cursor.event:

hover - On hover over an element

click - When clicking on an element

2. Cursor in an item or block

1)After the block appears, you can move the cursor to the created block, and the block will not disappear - this is a property is_over

Default: cursor.is_over: true
cursor.is_over: false
cursor.is_over (type boolean)

Change the block that appears

1. Block name

1) When a block is created, the name is applied to it nTooltip to id and classes, if there is a conflict with the layout for this name, you can change it. The plugin itself works by this name.

Default: elem.name: nTooltip
elem.name: testTooltip
elem.name (type string)

It will be like this

2. Block width

1) I needed to change the block size there is a property width, the layout applies this size as max-width, for free adaptability.

Default: elem.width: 150
elem.width: 250
elem.width (type integer)

3. Content inside the block

1) We display something inside the block, for example, some html, title, text, there is a property html.

Default: elem.html: undefined
elem.html: ‘test text’
elem.html (type string, undefined)

or specify in the attribute data-original-title=“test text“. Js will have higher priority

2) There is an additional output for some icons, this is html_before.

Default: elem.html_before: ''
elem.html_before: 'icon'
elem.html_before (type string)

3) There is an additional output for some icons, this is html_after.

Default: elem.html_after: ''
elem.html_after: 'icon'
elem.html_after (type string)

4. Block styles

1) Apply styles to the block that appears

Default: elem.style: { 'opacity': '0', 'z-index': '9999', 'position': 'absolute', 'width': '100%' }
elem.style: { 'background': 'red' }
elem.style (type json)

5. Block event functions

1) Element events are executed during the appearance and disappearance of the block, 2 functions work, eventStart, eventStop

Default: elem.eventStart: function(self, self_elem, options){}
elem.eventStart: function(self, self_elem, options){}
elem.eventStart (type function)

Default: elem.eventStop: function(self, self_elem, options){}
elem.eventStop: function(self, self_elem, options){}
elem.eventStop (type function)

Before element in block

1. Displaying a before element in a block

1) Display or not display a before element inside a block

Default: before.display: true
before.display: false
before.display (type boolean)

2. Dimensions before

1) Specifying the dimensions of the before element inside the block

Default: before.width: 15
before.width: 10
before.width (type integer)

Default: before.height: 15
before.height: 10
before.height (type integer)

3. Content in before

1) We display something inside a before element, for example, some kind html, title, text, there is a property html.

Default: before.html: ''
before.html: ''
before.html (type string)

4. Styles for a before element

1) Styling the befor element

Default: before.style: { 'opacity': '0', 'z-index': '9999', 'position': 'absolute', 'width': '100%' }
before.style: { ‘background’: ‘red’ }
before.style (type json)

5. Event functions before element in bloc

1) Element events are executed during the appearance and disappearance of the block, 2 functions work, eventStart, eventStop

Default: before.eventStart: function(self, self_elem, options){}
before.eventStart: function(self, self_elem, options){}
before.eventStart (type function)

Default: before.eventStop: function(self, self_elem, options){}
before.eventStop: function(self, self_elem, options){}
before.eventStop (type function)

Animation

1. Animation Activity

1) Enable animation to work, respectively, you can disable if the property active will accept false

Default: animation.active: true
animation.active: false
animation.active (type boolean)

2. Move block

1) The effect of moving a block from the previous element on which it was previously displayed

Default: animation.moving: true
animation.moving: true
animation.moving (type boolean)

3. Increase or decrease a block and run time

1) When hovering or clicking on an element, a block is displayed with the effect of increasing or otherwise decreasing

Default: animation.scale: true
animation.scale: true
animation.scale (type boolean)

2) Disable only block increase when

Default: animation.scale_start: true
animation.scale_start: false
animation.scale_start (type boolean)

3) Disable only block reduction

Default: animation.scale_stop: true
animation.scale_stop: false
animation.scale_stop (type boolean)

4) We set the time to increase or decrease the block, Default time is taken as base if animation.time_scale takes on the meaning undefined

Default: animation.time_scale: 600
animation.time_scale: 1000
animation.time_scale (type integer, undefined)

4. Styles are executed during animation execution, animation is executed from and to. It will be to_1_css before end_2_css

1) to_1_css — the style is applied before the block is displayed

Default: animation.to_1_css: { ‘opacity’: ‘0’ }
animation.to_1_css: {‘opacity’: ‘0’}
animation.to_1_css (type json)

2) to_2_css — the style is applied when the block is rendered

Default: animation.to_2_css: { ‘opacity’: ‘1’ }
animation.to_2_css: {‘opacity’: ‘1’}
animation.to_2_css (type json)

3) end_1_css — the style is applied when the block starts to disappear

Default: animation.end_1_css: { ‘opacity’: ‘1’ }
animation.end_1_css: {‘opacity’: ‘1’}
animation.end_1_css (type json)

4) end_2_css — the style is applied when the block is about to be destroyed

Default: animation.end_2_css: { ‘opacity’: ‘0’ }
animation.end_2_css: {‘opacity’: ‘0’}
animation.end_2_css (type json)

5. Block animation event functions

1) Block events are executed in the process of block appearance and disappearance, 2 functions work, eventStart, eventStop

Default: animation.eventStart: function(self, self_elem, options){}
animation.eventStart: function(self, self_elem, options){}
animation.eventStart (type function)

Default: animation.eventStop: function(self, self_elem, options){}
animation.eventStop: function(self, self_elem, options){}
animation.eventStop (type function)