This time I will share jQuery Plugin and tutorial about Lightweight Rich Text Tooltip Plugin For jQuery – bng.tooltip.js, hope it will help you in programming stack.
File Size: | 3.99 KB |
---|---|
Views Total: | 1166 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
bng.tooltip.js is a simple, animated jQuery tooltip enhancement plugin which allows for embedding any html elements into tooltips using html5 data attribute.
How to use it:
1. Place the latest jQuery library and the jQuery bng.tooltip.js plugin at the bottom of the document.
1 |
< script src = "//code.jquery.com/jquery-latest.min.js" ></ script > |
2 |
< script src = "bng.tooltip.js" ></ script > |
2. Add the class ‘bng-tooltip’ to html element and set the tooltip content using data-bng-title
attribute.
1 |
< a href = "#" class = "bng-tooltip" title = "I am native title" |
2 |
data-bng-title = "HTML CONTENT HERE" > |
3 |
Hover me now mate! |
4 |
</ a > |
3. Initialize the tooltip plugin.
1 |
$( '.bng-tooltip' ).bng<a href= "https://www.jqueryscript.net/tooltip/" >Tooltip</a>(); |
4. Style the tooltip as per your needs.
01 |
.bng-tooltip { |
02 |
position : relative ; |
03 |
cursor : pointer ; |
04 |
} |
05 |
06 |
span.bng-arrow { |
07 |
width : 0 ; |
08 |
height : 0 ; |
09 |
margin-left : -8px ; |
10 |
border-style : solid ; |
11 |
position : absolute ; |
12 |
left : 50% ; |
13 |
line-height : 0px ; |
14 |
} |
15 |
16 |
.bng-arrow-down { |
17 |
border-width : 8px 8px 0 8px ; |
18 |
border-color : #da2e2b transparent transparent transparent ; |
19 |
top : 100% ; |
20 |
} |
21 |
22 |
.bng-arrow-up { |
23 |
border-width : 0 8px 8px 8px ; |
24 |
border-color : transparent transparent #da2e2b transparent ; |
25 |
top : -8px ; |
26 |
} |
27 |
28 |
#bngTooltip { |
29 |
font-style : italic ; |
30 |
font-weight : bold ; |
31 |
padding : 10px ; |
32 |
text-align : center ; |
33 |
position : absolute ; |
34 |
display : none ; |
35 |
} |
5. Options and defaults.
01 |
$( '.bng-tooltip' ).bngTooltip({ |
02 |
03 |
// position |
04 |
// e.g. 'bottom', 'top' |
05 |
'position' : null , |
06 |
07 |
// width |
08 |
'width' : 300, |
09 |
10 |
// background color |
11 |
'background-color' : '#da2e2b' , |
12 |
13 |
// border radius in pixels |
14 |
'border-radius' : 5, |
15 |
16 |
// font size in pixels |
17 |
'font-size' : 14, |
18 |
19 |
// text color |
20 |
'color' : '#fff' , |
21 |
22 |
// transition effect |
23 |
transition: 'fadeToggle' , |
24 |
25 |
// transition delay in ms |
26 |
delay: 400 |
27 |
|
28 |
}); |
This awesome jQuery plugin is developed by huy-tran. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net