jQuery is one of the strongest and most flexible javascript libraries to use in web development. With the framework and API being so open and well documented, it’s easy for a developer of any skill level to develop their own effects and plugins. Today we offer you a jquery tooltip plugin for download. This plugin is a mod of the original made by Flowplayer with enhanced ease implementation and accessibility. Please take the time to review the documentation and understand some minor differences:
Tooltip jQuery Implementation
The tooltip reads the target (in the example above, the target would be all <a> tags with the class of tooltip), and creates a tooltip based upon the title attribute on that link. For example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<!-- Invoke the script and plugin -->
<script type="text/javascript">
$(function() {
// Target elements to apply, and options to pass to the API
$("a.tooltip").tooltip( { offset: [15, 20] } );
});
</script>
<a class="tooltip" href="#" title="link text">link</a>Grab the Code
(function($){$.tools=$.tools||{version:{}};$.tools.version.tooltip='0.1.0';var effects={toggle:[function(){this.getTip().show()},function(){this.getTip().hide()}],fade:[function(){this.getTip().fadeIn(this.getConf().fadeInSpeed)},function(){this.getTip().fadeOut(this.getConf().fadeOutSpeed)}]};$.tools.addTipEffect=function(name,loadFn,hideFn){effects[name]=[loadFn,hideFn]};$.tools.addTipEffect("slideup",function(){var conf=this.getConf();var o=conf.slideOffset||10;this.getTip().css({opacity:0}).animate({top:'-='+o,opacity:conf.opacity},conf.slideInSpeed||200).show()},function(){var conf=this.getConf();var o=conf.slideOffset||10;this.getTip().animate({top:'-='+o,opacity:0},conf.slideOutSpeed||200,function(){$(this).hide().animate({top:'+='+(o*2)},0)})});function Tooltip(trigger,conf){var self=this;var tip=trigger.children("span");if(conf.tip){if(conf.tip.indexOf("#")!=-1){tip=$(conf.tip)}else{tip=trigger.nextAll(conf.tip).eq(0);if(!tip.length){tip=trigger.parent().nextAll(conf.tip).eq(0)}}}function bind(name,fn){$(self).bind(name,function(e,args){if(fn&&fn.call(this)===false&&args){args.proceed=false}});return self}$.each(conf,function(name,fn){if($.isFunction(fn)){bind(name,fn)}});var isInput=trigger.is("input, textarea");trigger.bind(isInput?"focus":"mouseover",function(e){e.target=this;self.show(e);tip.hover(function(){self.show()},function(){self.hide()})});trigger.bind(isInput?"blur":"mouseout",function(){self.hide()});tip.css("opacity",conf.opacity);var timer=0;$.extend(self,{show:function(e){if(e){trigger=$(e.target)}clearTimeout(timer);if(tip.is(":animated")||tip.is(":visible")){return self}var p={proceed:true};$(self).trigger("onBeforeShow",p);if(!p.proceed){return self}var top=trigger.position().top-tip.outerHeight();var height=tip.outerHeight()+trigger.outerHeight();var pos=conf.position[0];if(pos=='center'){top+=height/2}if(pos=='bottom'){top+=height}var width=trigger.outerWidth()+tip.outerWidth();var left=trigger.position().left+trigger.outerWidth();pos=conf.position[1];if(pos=='center'){left-=width/2}if(pos=='left'){left-=width}top+=conf.offset[0];left+=conf.offset[1];tip.css({position:'absolute',top:top,left:left});effects[conf.effect][0].call(self);$(self).trigger("onShow");return self},hide:function(){clearTimeout(timer);timer=setTimeout(function(){if(!tip.is(":visible")){return self}var p={proceed:true};$(self).trigger("onBeforeHide",p);if(!p.proceed){return self}effects[conf.effect][1].call(self);$(self).trigger("onHide")},conf.delay||1);return self},isShown:function(){return tip.is(":visible, :animated")},getConf:function(){return conf},getTip:function(){return tip},getTrigger:function(){return trigger},onBeforeShow:function(fn){return bind("onBeforeShow",fn)},onShow:function(fn){return bind("onShow",fn)},onBeforeHide:function(fn){return bind("onBeforeHide",fn)},onHide:function(fn){return bind("onHide",fn)}})}$.prototype.tooltip=function(conf){var el=this.eq(typeof conf=='number'?conf:0).data("tooltip");if(el){return el}var opts={tip:null,effect:'slideup',delay:30,opacity:1,position:['top','center'],offset:[0,0],api:false};if($.isFunction(conf)){conf={onBeforeShow:conf}}$.extend(opts,conf);this.each(function(){$(this).prepend('<span class="tip"><span class="top"></span>'+$(this).attr("title")+'<span class="bottom"></span></span>');el=new Tooltip($(this),opts);$(this).data("tooltip",el)});return opts.api?el:this}})(jQuery);