/** * jQuery Tooltip Plugin * @Url http://ramblingwood.com/sandbox/js/jquery/plugins/tooltips/demo.html * @Blog http://ramblingwood.com/jquery/jquery-plugin-tooltips * @Author Ramblingwood * @Date 5/29/2009 */ (function($){ /* Internal Functions Start */ $.tooltips = {}; // This function gets the viewable area width and height. Non-jQuery javascript by QuirksMode.org. $.tooltips.docXY = function (dim) { if (window.innerWidth) { //if browser supports window.innerWidth var w = window.innerWidth; var h = window.innerHeight; } else if (document.all) { //else if browser supports document.all (IE 4+) var w = document.body.clientWidth; var h = document.body.clientHeight; } if(typeof dim =='string'){ if(dim == 'x') return w; else return h; } var r = { height:h, width:w }; return r; }; // This is another internal function that checks to make sure that the tooltip doesn't // overflow the viewable area. $.tooltips.noOverflow = function (jQueryTooltip, settings, e, hover) { var $this= jQueryTooltip; var borderLeft = $this.css('border-left-width').split('px'); var borderRight = $this.css('border-right-width').split('px'); // Here we have to add the borders because jQuery doesn't do that by default. var width = Number($this.outerWidth(true))+Number(borderLeft[0])+Number(borderRight[0]); var thisLeft = $this.css('left'); var bodyWidth = $.tooltips.docXY('x'); // This checks to see if the width of the tooltip plus the offset from the mouse isn't // greater than the width the viewable area minus the X postion of the mouse. Effectively // finding how far from the right the mouse is. if( ( ((settings.offsetX*2) + width ) > (bodyWidth - e.pageX) ) ) $this.css({top:settings.offsetY + e.pageY,right:0,left:'auto'}); else $this.css({top:settings.offsetY + e.pageY,left:settings.offsetX + e.pageX,right:'auto'}); // Remember to show the tooltip, since this is called initially from the first hover, // when the tooltip is hidden $this.show(); }; jQuery.fn.tooltips = function (settings, settingsExtra) { return this.each(function () { // Checks to see if `settings` is a string, if it is, it is the content of the tooltip, // not a settings object if(typeof settings == 'string') { var content = settings; settings = $.extend({}, $.fn.tooltips.defaults, settingsExtra); } else if (typeof settings == 'object' || typeof settings == 'undefined') { settings = $.extend({}, $.fn.tooltips.defaults, settings); var content = $(this).attr('title'); } // Tries to see if it already exists var $tooltip = $('body div.jqueryTooltip.'+settings.className); if($tooltip.length < 1) { // It doesn't so append it to $('body').append('

'); var $tooltip = $('body div.jqueryTooltip.'+settings.className); $tooltip.css({position :'absolute',display:'none'}); } else { $tooltip.css(settings.css); } var $this = $(this); var tooltipClass = 'div.jqueryTooltip.'+settings.className; $(this).hover(function (e) { $tooltipDiv = $('body div.jqueryTooltip.'+settings.className); $.data($this,'title',$this.attr('title')); $this.attr('title',''); $tooltipDiv.css({ width: settings.width }); $tooltipDiv.html(content); $.tooltips.noOverflow($tooltipDiv, settings, e, true); $(this).mousemove(function (e) { $.tooltips.noOverflow($(tooltipClass), settings, e); return false; }); e.preventDefault(); return false; }, function (e) { $(tooltipClass).hide(); $this.attr('title',$.data($this,'title')); e.preventDefault(); return false; }); }); } $.fn.tooltips.defaults = { offsetX : 15, offsetY : 15, width : '', className : 'tooltip', css : { position:'absolute', background:'#e5e5e5', border:'1px #999 solid', padding:'10px', display:'none', width: this.width } }; })(jQuery);