Simple Responsive Tooltip

by kompiajaib

HTML

<p>
Lorem ipsum nam lorem debitis ut, postulant <a href="#" title="Iriure appetere menandri ei duo, ad per sumo solum tibique?">vulputate his cu</a>, sit mutat accumsan ne. Vis ea sapientem assentior prodesset. Sea ex oratio accumsan, ne per zzril doming, pri ne periculis corrumpit reprimique? Fugit legimus dignissim ad cum, eruditi invidunt urbanitas pri te.
</p>
<p>
Cum ea mundi bonorum <a class='test' href="#" title="Sea ex oratio accumsan">reprehendunt</a>, no elitr fabulas rationibus pro, vix tale sint id <a class='other' href="#" title="Sea ex oratio accumsan">reprehendunt</a>. 
</p>
<div class="separator" style="text-align: center;">
<img alt="Nam liber tempor cum soluta" src="http://1.bp.blogspot.com/-I1XHvVVBmfs/Uxqn_KOXBxI/AAAAAAAAbYo/seDgUKP1y5k/s1600/8.png" height="114" title="Nam liber tempor cum soluta nobis eleifend option" width="220" />
    <a class="tool" href="#" title="Nam liber tempor cum soluta nobis eleifend option"><img class="tool" alt="Nam liber tempor cum soluta" src="http://1.bp.blogspot.com/-I1XHvVVBmfs/Uxqn_KOXBxI/AAAAAAAAbYo/seDgUKP1y5k/s1600/8.png" height="114" title="Nam liber tempor cum soluta nobis eleifend option" width="220"/></a></div>
<div class="tool" title="Click to open content!" style="display:inline-block;margin:20px 0">Div with title tag</div><br/>
<input placeholder='Input with title tag' title='Click to search!' type='text'/><br/><br/>
<input class="input-not" placeholder='Input without title tag' title='Click to search!' type='text'/><br/><br/>

CSS

#tooltip {
	text-align: center;
	color: #fff;
	background: #333;
	position: absolute;
	z-index: 100;
	padding:8px 15px;
    border-radius:3px;
    box-shadow:2px 2px 3px rgba(0,0,0,.2);
}
 
	#tooltip:after {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #333;
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10px;
		margin-left: -10px;
	}
 
	#tooltip.top:after	{
		border-top-color: transparent;
		border-bottom: 10px solid #333;
		top: -20px;
		bottom: auto;
	}
 
	#tooltip.left:after {
		left: 10px;
		margin: 0;
	}
 
	#tooltip.right:after {
		right: 10px;
		left: auto;
		margin: 0;
	}

JavaScript

$('a,img,input,.tool,img.tool').not('input.input-not,a.tool').attr('rel', 'tooltip');
$('a.tool').data("title", $('a.tool').attr("title")).removeAttr("title");
$( document ).ready( function() {
 	var targets = $( '[rel~=tooltip]' ),
		target  = false,
		tooltip = false,
		title   = false;
 	targets.bind( 'mouseenter', function() {
		target  = $( this );
		tip     = target.attr( 'title' );
		tooltip = $( '<div id="tooltip"></div>' );
		if( !tip || tip == '' )
			return false;
		target.removeAttr( 'title' );
		tooltip.css( 'opacity', 0 )
			   .html( tip )
			   .appendTo( 'body' );
 		var init_tooltip = function() {
			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
				tooltip.css( 'max-width', $( window ).width() / 2 );
			else
				tooltip.css( 'max-width', 340 );
 			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
				pos_top  = target.offset().top - tooltip.outerHeight() - 20;
 			if( pos_left < 0 ) {
				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
				tooltip.addClass( 'left' );
			}
			else
				tooltip.removeClass( 'left' );
			if( pos_left + tooltip.outerWidth() > $( window ).width() ) {
				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
				tooltip.addClass( 'right' );
			}
			else
				tooltip.removeClass( 'right' );
 			if( pos_top < 0 ) {
				var pos_top = target.offset().top + target.outerHeight();
				tooltip.addClass( 'top' );
			}
			else
				tooltip.removeClass( 'top' );
 			tooltip.css( { left: pos_left, top: pos_top } )
				   .animate( { top: '+=10', opacity: .9 }, 500 );
		};
 		init_tooltip();
		$( window ).resize( init_tooltip );
		var remove_tooltip = function() {
			tooltip.animate( { top: '-=10', opacity: 0 }, 500, function()
			{
				$( this ).remove();
			});
 			target.attr( 'title', tip );
		};
 		target.bind( 'mouseleave', remove_tooltip );
		tooltip.bind( 'click', remove_tooltip );
	});
});