Super easy tooltips. example html: <a href="#" class="tooltip" title="title here">Link Text</a> In CSS, set .tooltip to relative postion, and .title to absolute position, with whatever styling you want such as background and padding.

tooltip.js

function onHoverToggleTooltip( e ) {
	var 	$this	= $( this ),
		title	= $this.attr( 'title' ),
		type	= e.type,
		offset 	= $this.offset(),
		xOffset = e.pageX - offset.left + 10,
		yOffset = e.pageY - offset.top + 30;
		
	if( type == 'mouseenter' ) {
		$this.data( 'tipText', title ).removeAttr( 'title' );
		$this.append( '<span class="title">' + title + '</span>' );
		$this.find ( '.title' )
			.css( 'top', ( yOffset ) + 'px' )
			.css( 'left', ( xOffset ) + 'px' );
	} else if ( type == 'mouseleave' ) {
		$this.attr( 'title', $this.data( 'tipText' ) );
		$this.find ( '.title' ).remove();
	} else if ( type == 'mousemove' ) {
		$this.find ( '.title' )
			.css( 'top', ( yOffset ) + 'px' )
			.css( 'left', ( xOffset ) + 'px' );
	}
	
}
 
$( document.querySelectorAll( '.tooltip' ) ).on({ 
	 mouseenter: onHoverToggleTooltip, 
	 mouseleave: onHoverToggleTooltip, 
	 mousemove: onHoverToggleTooltip
});

CodePen: http://codepen.io/tammyhart/pen/ajmls