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
