splain replacement plugin

tipBubble.js

/**
* NOTE: a work in progress - just stubbing things out for now; haven't tested it yet
*/

/**
 * @plugin tipBubble
 * builds a tooltip style widget from DOM
 * (replaces legacy splain)
 *
 * Meetup.UI.activeTip keeps track of the open tip bubble 
 * as to only allow one bubble to be open at any given time
 *
 * @usage $('.tip-trigger').tipBubble();
 *
 * <!-- sourcing the tip from markup -->
 * <a href="#" class="tip-trigger" data-tip-selector="#myTip">Learn more</a>
 * <blockquote id="myTip" class="hide-if-js">
 *		<p>this is the tip - you can put pretty much anything in here</p>
 * </div>
 *
 * <!-- OR for simple tips, use the title attribute -->
 * <a href="#" class="tip-trigger" title="This is a simple tip! I hope it's helpful.">Learn more</a>
 */

Meetup.UI.activeTip = null;
(function($) {

	/**
	 * SETTINGS
	 *
	 * color			{string}	background color of the tip box
	 * arrowPosition	{string}	"left" or "right"	
	 * hoverable		{boolean}	true for hover-triggered splains
	 *								false for legacy splain behavior (click to open, click to close.)
	 */
	var defaultSettings = {
		color: "#333333",
		arrowPosition: "left",
		hoverable: false
	};

	/**
	 * @function buildTipFromMarkup
	 * 
	 * @param $trigger trigger (usually a link) (jquery)
	 */
	var buildTipFromMarkup = function( $trigger ) {
		var $wrap = $('<div class="tooltip-wrap" />');
		var $blockquote = $( $trigger.data("tip-selector") );
		
		$blockquote.appendTo( $wrap );

		return $wrap;
	};

	/**
	 * @function buildTipFromTitle
	 *
	 * @param $trigger trigger (usually a link) (jquery)
	 */
	var buildTipFromTitle = function( $trigger ) {
		var content = $trigger.title;
		var getClass = function() {
			if ( $trigger.data("arrowPosition") == "right" ) {
				return "tooltip-left";
			} else {
				return "tooltiop";
			};
		};

		var $tip =  $('<div class="tooltip-wrap"><blockquote class="' + getClass() + '"><p>' + content + '</p></blockquote></div>');
		$('body').append( $tip );

		return $tip;
	};

	/**
	 * @function setPosition
	 * calculates best absolute position for tip based on trigger location
	 * also adjusts tip className to allow left/right arrow placement
	 *
	 * @param $trigger trigger (usually a link) (jquery)
	 * @param $tip jquery representation of a tip bubble
	 */ 
	var setPosition = function( $trigger, $tip ) {
		if ( $trigger.data("arrowPosition") == "right" ) {
			Meetup.Layout.position($tip, $trigger, {x:"left", y:"bottom"},{"left":-($tip.width() - $trigger.width() + 12),"top":-58});
		} else {
			Meetup.Layout.position($tip, $trigger, {x:"right", y:"bottom"},{"left":0,"top":-58});
		}
	}

	/**
	 * @function openTip
	 * @param $tip jquery representation of a tip bubble
	 */
	var openTip = function( $tip ) {
		if ( Meetup.UI.activeTip ) {
			closeTip(Meetup.UI.activeTip);
		}
		setPosition( $tip );
		$tip.fadeIn('fast', function() {
			Meetup.UI.activeTip = $tip;	
		});
	};

	/**
	 * @function closeTip
	 * @param $tip jquery representation of a tip bubble
	 */
	var closeTip = function( $tip ) {
		$tip.fadeOut('fast', function() {
			Meetup.UI.activeTip = null;	
		});
	};

	/**
	 * @PLUGIN tip
	 */
	$.fn.tipBubble = function(settings) {
		opts = $.extend(settings, defaultSettings);

		$(this).each(function() {
			$this = $(this);
			
			// bail out if we can't find a tip for this trigger
			if ( !$this.data('tipbuble-selector') || !$this.title ) {
				LOG.info("tipBubble couldn't find a tip for " + $this + "use the title attribute or data-tipbubble-selector to build from markup");
				return;	
			};

			// right arrow?
			if ( opts.arrowPosition == "right" ) {
				$this.data("arrowPosition", "right");
			};

			// build the bubble
			var $tip;
			if ( $this.data('tipbubble-selector') ) {
				$tip = buildTipFromMarkup( $this );
			} else {
				$tip = buildTipFromTitle( $this );
			};

			// delegate events
			if ( opts.hoverable ) {
				$this.live('mouseover', function() {
					openTip( $tip );
				});
				$this.live('mouseout', function() {
					closeTip( $tip );
				});
			} else {
				$this.live('click', function() {
					openTip( $tip );	
				});
				$tip.bind('.close-tip', 'click', function() {
					closeTip( $tip );		
				})
			};
			
			// allow triggering of open/close of tips through custom events
			$trigger.bind('open', function() {
				openTip( $tip );		
			});
			$trigger.bind('close', function() {
				closeTip( $tip );		
			});

		});
	};

})(jQuery);