About

mTip is a flextendable jQuery tooltip plugin with a lot of customization options.

Please leave tips, suggestions and bug reports in the comment section belooowww.

Enjoy!

Examples

Move your mouse over the example texts to display the tooltip.

The plugin makes use of the black theme by default (don't forget to load the CSS).

• [view source] Tooltip simple

  <span id="tip-simple" title="This is a simple tooltip demonstration..">Tooltip simple</span>
  			

  $( '#tip-simple' ).mTip( {
  	align		: 'right'
  } );
  			

• [view source] Tooltip with HTML content

  <span class="demo" id="tip-html">Tooltip with HTML content</span>
  			

  $( "#tip-html" ).mTip( {
  	content		: 'This <i>tooltip</i> has <strong>HTML</strong> content. Do you like the movie <u>Madagascar</u> too?<br />'
  					+ '<br /><img src="/library/mTip/madagascar.jpg" title="Madagascar" />',
  	align		: 'bottom'
  } );
  			

• [view source] Tooltip with delay

  <span id="tip-delay" title="This one shows on after half a second and hides after three.">Tooltip with delay</span>
  			

  $( '#tip-delay' ).mTip( {
  	delay		: [500, 3000]
  } );
  			

• [view source] Tooltip top left, shows on mousedown

  <span id="tip-topleft" title="This one shows on mouse down.">Tooltip top left, shows on mousedown</span>
  			

  $( '#tip-topleft' ).mTip( {
  	showOn		: 'mousedown',
  	align		: 'top left'
  } );
  			

• [view source] Tooltip with dynamic content

  <span id="tip-content">Tooltip with dynamic content</span>
  			

  var counter = 0;
  	
  $( '#tip-content' ).mTip( {
  	align		: 'bottom',
  	content		: function() {
  		return 'This tooltip has been shown/updated ' + ++counter + ' time' + ( counter > 1 ? 's' : '' );
  	}
  } );
  			

• [view source] Tooltip with live content

  <span id="tip-live" title="Fallback title">Tooltip with live content</span>
  			

  var $tip = $( '#tip-live' ).mTip().mTip( 'get' );
  
  setInterval( function() {
  	$tip.html( ( new Date() ).toUTCString() );
  }, 1000 );
  			

• [view source] Tooltip with custom animation

  <span id="tip-animate" title="Awesome!">Tooltip with custom animation</span>
  			

  $( '#tip-animate' ).mTip( {
  	show		: function( $tip, options ) {
  		var offsetTop = parseInt( $tip.css( 'top' ) );
  		
  		$tip.stop( true )
  			.css( 'top', 0 )
  			.show()
  			.animate( {
  				opacity		: options.opacity,
  				top			: offsetTop
  			}, options.fade[0], 'easeOutBounce' );
  	},
  	hide		: function( $tip, options ) {
  		$tip.stop( true )
  			.animate( {
  				left		: parseInt( $tip.css( 'left' ) ) + 100,
  				opacity		: 0
  			}, options.fade[1], 'linear' );
  	},
  	align		: 'right',
   	fade		: [1000, 500]
  } );
  			

• [view source] Tooltip box, click me!

  <span id="tip-box">Tooltip box, click me!</span>
  			

  $( '#tip-box' ).mTip( {
  	showOn		: 'click',
  	hideOn		: 'dummyHide', // Event will only be triggered by calling .mTip( 'hide' );
  	content		: '<span onClick="javascript:$(\'#tip-box\').mTip(\'hide\');" title="Close"></span>'
  					+ 'This box will only close after clicking the close icon.',
  	align		: 'right'
  } );
  			

•  
• [view source] Tooltip subtle sliding effect

  $.fn.mTip.defaults.show = function( $tip, options ) {
  	if( $tip.css( 'opacity' ) == options.opacity ) return;
  	
  	var offsetTop 	= parseInt( $tip.css( 'top' ) ),
  		offsetLeft 	= parseInt( $tip.css( 'left' ) ),
  		distance	= 7000 / options.fade[0];
  	
  	$tip.stop( true )
  		.css( { 
  			top			: ( ! options.align.left && ! options.align.right 
  								? offsetTop  + ( options.align.top  ? -distance : 0 ) + ( options.align.bottom ? distance : 0 ) 
  								: offsetTop
  						  ),
  			left		: offsetLeft + ( options.align.left ? -distance : 0 ) + ( options.align.right  ? distance : 0 )
  		} )
  		.show()
  		.animate( {
  			opacity		: options.opacity,
  			top			: offsetTop,
  			left		: offsetLeft
  		}, options.fade[0], options.fadeEasing[0] );
  };
  
  $.fn.mTip.defaults.hide = function( $tip, options ) {
  	var offsetTop 	= parseInt( $tip.css( 'top' ) ),
  		offsetLeft 	= parseInt( $tip.css( 'left' ) ),
  		distance	= 7000 / options.fade[0];
  	
  	$tip.stop( true )
  		.animate( {
  			top			: ( ! options.align.left && ! options.align.right 
  								? offsetTop  + ( options.align.top  ? -distance : 0 ) + ( options.align.bottom ? distance : 0 ) 
  								: offsetTop
  						  ),
  	  		left		: offsetLeft + ( options.align.left ? -distance : 0 ) + ( options.align.right  ? distance : 0 ),
  			opacity		: 0
  		}, options.fade[1], options.fadeEasing[1], function() { $tip.hide() } );
  };
  			

Manual

Tooltip defaults can be found and modified in: $.fn.mTip.defaults.

The following methods are available:

The following options are available:

Download

mTip is dual licensed under the MIT and GPL licenses.

It has been tested with jQuery version 1.6.2+ in IE7+, FF4+, Safari 5+, Chrome 8+, and Opera 11.
Other browsers and versions may work.

Comments

Notice: If you report a bug, please send me a testcase (via JSFiddle for example), this helps me a lot! Thanks.