jQuery Tooltip Plugins
Blogs20112011-11-10
jQuery Tooltip Plugins
I use jquery-qtip as my tooltip. However, there are so many jQuery based tooltips plugins.
Here I found a helpful resource list these colorful tooltips:
http://graphicalerts.com/best-jquery-tooltip-plugins-demos-tutorials-examples/
And, the following is my qtip codes, which is easy for retrieve and reference.
//1. load:
<script src="jquery-qtip/jquery.qtip-2.min.js">
//2. define:
$('#section ul li a.active', '#right').each(function() {
var t = $(this).attr('href');
$(this).qtip({
content: '<img src="'+t+'" title="'+t+'" />',
show: 'mouseover',
hide: 'mouseout',
position: { corner: { target: 'topRight', tooltip: 'bottomLeft' }},
style: {
tip: 'leftMiddle',
width: 160,
padding: 1,
background: '#A2D959',
color: 'black',
textAlign: 'center',
border: { width: 1, radius: 10, color: '#A2D959' },
tip: 'bottomLeft',
name: 'dark'
}
});
});The above is a little difference from other samples since it dynamically gets displayed content.