1 /**

     2  * Interface Elements for jQuery

     3  * Tooltip

     4  * 

     5  * http://interface.eyecon.ro

     6  * 

     7  * Copyright (c) 2006 Stefan Petre

     8  * Dual licensed under the MIT (MIT-LICENSE.txt) 

     9  * and GPL (GPL-LICENSE.txt) licenses.

    10  *   

    11  *

    12  */

    13 

    14 /**

    15  * Creates tooltips using title attribute

    16  *

    17  * 

    18  * 

    19  * @name ToolTip

    20  * @description Creates tooltips using title attribute

    21  * @param Hash hash A hash of parameters

    22  * @option String position tooltip's position ['top'|'left'|'right'|'bottom'|'mouse']

    23  * @options Function onShow (optional) A function to be executed whenever the tooltip is displayed

    24  * @options Function onHide (optional) A function to be executed whenever the tooltip is hidden

    25  *

    26  * @type jQuery

    27  * @cat Plugins/Interface

    28  * @author Stefan Petre

    29  */

    30 jQuery.iTooltip = {

    31 	current : null,

    32 	focused : false,

    33 	oldTitle : null,

    34 	focus : function(e)

    35 	{

    36 		jQuery.iTooltip.focused = true;

    37 		jQuery.iTooltip.show(e, this, true);

    38 	},

    39 	hidefocused : function(e)

    40 	{

    41 		if (jQuery.iTooltip.current != this)

    42 			return ;

    43 		jQuery.iTooltip.focused = false;

    44 		jQuery.iTooltip.hide(e, this);

    45 	},

    46 	show : function(e, el, focused)

    47 	{

    48 		if (jQuery.iTooltip.current != null)

    49 			return ;

    50 		if (!el) {

    51 			el = this;

    52 		}

    53 		

    54 		jQuery.iTooltip.current = el;

    55 		pos = jQuery.extend(

    56 			jQuery.iUtil.getPosition(el),

    57 			jQuery.iUtil.getSize(el)

    58 		);

    59 		jEl = jQuery(el);

    60 		title = jEl.attr('title');

    61 		href = jEl.attr('href');

    62 		if (title) {

    63 			jQuery.iTooltip.oldTitle = title;

    64 			jEl.attr('title','');

    65 			jQuery('#tooltipTitle').html(title);

    66 			if (href)

    67 				jQuery('#tooltipURL').html(href.replace('http://', ''));

    68 			else 

    69 				jQuery('#tooltipURL').html('');

    70 			helper = jQuery('#tooltipHelper');

    71 			if(el.tooltipCFG.className){

    72 				helper.get(0).className = el.tooltipCFG.className;

    73 			} else {

    74 				helper.get(0).className = '';

    75 			}

    76 			helperSize = jQuery.iUtil.getSize(helper.get(0));

    77 			filteredPosition = focused && el.tooltipCFG.position == 'mouse' ? 'bottom' : el.tooltipCFG.position;

    78 			

    79 			switch (filteredPosition) {

    80 				case 'top':

    81 					ny = pos.y - helperSize.hb;

    82 					nx = pos.x;

    83 				break;

    84 				case 'left' :

    85 					ny = pos.y;

    86 					nx = pos.x - helperSize.wb;

    87 				break;

    88 				case 'right' :

    89 					ny = pos.y;

    90 					nx = pos.x + pos.wb;

    91 				break;

    92 				case 'mouse' :

    93 					jQuery('body').bind('mousemove', jQuery.iTooltip.mousemove);

    94 					pointer = jQuery.iUtil.getPointer(e);

    95 					ny = pointer.y + 15;

    96 					nx = pointer.x + 15;

    97 				break;

    98 				default :

    99 					ny = pos.y + pos.hb;

   100 					nx = pos.x;

   101 				break;

   102 			}

   103 			helper.css(

   104 				{

   105 					top 	: ny + 'px',

   106 					left	: nx + 'px'

   107 				}

   108 			);

   109 			if (el.tooltipCFG.delay == false) {

   110 				helper.show();

   111 			} else {

   112 				helper.fadeIn(el.tooltipCFG.delay);

   113 			}

   114 			if (el.tooltipCFG.onShow) 

   115 				el.tooltipCFG.onShow.apply(el);

   116 			jEl.bind('mouseout',jQuery.iTooltip.hide)

   117 			   .bind('blur',jQuery.iTooltip.hidefocused);

   118 		}

   119 	},

   120 	mousemove : function(e)

   121 	{

   122 		if (jQuery.iTooltip.current == null) {

   123 			jQuery('body').unbind('mousemove', jQuery.iTooltip.mousemove);

   124 			return;	

   125 		}

   126 		pointer = jQuery.iUtil.getPointer(e);

   127 		jQuery('#tooltipHelper').css(

   128 			{

   129 				top 	: pointer.y + 15 + 'px',

   130 				left	: pointer.x + 15 + 'px'

   131 			}

   132 		);

   133 	},

   134 	hide : function(e, el)

   135 	{

   136 		if (!el) {

   137 			el = this;

   138 		}

   139 		if (jQuery.iTooltip.focused != true && jQuery.iTooltip.current == el) {

   140 			jQuery.iTooltip.current = null;

   141 			jQuery('#tooltipHelper').fadeOut(1);

   142 			jQuery(el)

   143 				.attr('title',jQuery.iTooltip.oldTitle)

   144 				.unbind('mouseout', jQuery.iTooltip.hide)

   145 				.unbind('blur', jQuery.iTooltip.hidefocused);

   146 			if (el.tooltipCFG.onHide) 

   147 				el.tooltipCFG.onHide.apply(el);

   148 			jQuery.iTooltip.oldTitle = null;

   149 		}

   150 	},

   151 	build : function(options)

   152 	{

   153 		if (!jQuery.iTooltip.helper)

   154 		{

   155 			jQuery('body').append('<div id="tooltipHelper"><div id="tooltipTitle"></div><div id="tooltipURL"></div></div>');

   156 			jQuery('#tooltipHelper').css(

   157 				{

   158 					position:	'absolute',

   159 					zIndex:		3000,

   160 					display: 	'none'

   161 				}

   162 			);

   163 			jQuery.iTooltip.helper = true;

   164 		}

   165 		return this.each(

   166 			function(){

   167 				if(jQuery.attr(this,'title')) {

   168 					this.tooltipCFG = {

   169 						position	: /top|bottom|left|right|mouse/.test(options.position) ? options.position : 'bottom',

   170 						className	: options.className ? options.className : false,

   171 						delay		: options.delay ? options.delay : false,

   172 						onShow		: options.onShow && options.onShow.constructor == Function ? options.onShow : false,

   173 						onHide		: options.onHide && options.onHide.constructor == Function ? options.onHide : false

   174 					};

   175 					var el = jQuery(this);

   176 					el.bind('mouseover',jQuery.iTooltip.show);

   177 					el.bind('focus',jQuery.iTooltip.focus);

   178 				}

   179 			}

   180 		);

   181 	}

   182 };

   183 

   184 jQuery.fn.ToolTip = jQuery.iTooltip.build;