Tooltip class for Fidel

tooltip.class.js

/**
 * Shows just the (tool)tip.
 * 
 * Example:
 *     
 *     var tooltip = new TooltipClass({
 *       selector: '.tipped'
 *     });
 *
 * To inject content into the tooltip, place a data-tooltip attribute that matches the selector.
 * 
 * @param [Object] options Options to be used.
 * @option [String] selector Overrides default tooltip selector
 * @requires jquery
 * @requires class
 * @todo Convert to Fidel
 */

dmjs.TooltipClass = Class.extend({
	defaults: {
		selector: '[data-tooltip]'
	},

	/**
	 * Initializes tooltip events.
	 *
	 * @param [Object] options Options to be used.
	 */

	init: function(options) {
		var self = this;
		this.options = $.extend({}, this.defaults, options);

		this.windowWidth = $("html").width();
		this.bodyWidth = $("body").width();

		this.el = $(this.options.selector);
		this.el.live('mouseenter.tooltip', function() { self.show(this); });
		this.el.live('mouseleave.tooltip', function() { self.hide(this); });
	},

	/**
	 * Shows the tooltip.
	 *
	 * @param {DOMNode} el DOM node for moused over element.
	 */

	show: function(el) {
		var el = $(el),
				self = this;

    // Check if no data in tooltip
    if(el.data('tooltip').length==0) return false;

		this.tooltipElement = $('<div></div>')
			.addClass('TooltipContainer')
			.html(el.data('tooltip'))
			.appendTo('body')
			.show();


		$('body').bind('mousemove.tooltip', function(e) {
			self.updatePosition(e);
		});
	},

	/**
	 * Hides the tooltop
	 *
	 * @param {DOMNode} el DOM node for moused over element.
	 */

	hide: function(element) {
		$('body').unbind('mousemove.tooltip');
		$('.TooltipContainer').remove();
	},

	/**
	 * Updates the tooltips position when mouse is moved.
	 * 
	 * @param {Event} e Mouse move event
	 */

	updatePosition: function(e) {
		this.tooltipElement.css({
			left: e.pageX-(this.windowWidth-this.bodyWidth)/2-18,
			top: e.pageY-45
		});
	}
});