William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery Tooltip Plugins

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.

Advertisements

One response to “jQuery Tooltip Plugins

  1. Backup Creator 11/28/2011 at 4:25 am

    Thanks williamjxj for the Awesome share of information, it was very helpful to me. I really like the way you have presented your particular ideas regarding this situation, keep up the fabulous work. All the Best. John

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: