tooltip gist

gistfile1.txt

<style>
.tooltip-container {
		position: absolute; /* must have this */
	  	background: #000;
		background: rgba(0,0,0,.7);
		color: #fff;
		font: normal 11px/15px sans-serif;
		padding: 5px 10px;
		border-radius: 3px;
	    max-width: 200px;
	    opacity: 0;
	}

</style>

<a href="#" style="margin-left: 260px" data-tooltip="User Experience and some other things one has to think about" > Searchbox Area</a>

<script>
$( function() {
  // tooltip

  function Tooltip( idName){ 
	var label = document.createElement('span')
	label.id = idName;
	label.className = 'tooltip-container';
	document.body.appendChild(label);

  	$label = $(label);

	this.onMouseEvent = function( e ) {
		var $this	= $( this ),
			offset 	= $this.offset(),
			xOffset = offset.left;
			yOffset = /*e.pageY -*/ offset.top + 30;

		switch( e.type ){
			case 'mouseenter':
				onMouseEnter();
				break;
			case 'mouseleave':
				onMouseLeave();
				break;
			case 'mousemove':
				onMouseMove();
				break;
			}

		function onMouseEnter(){
			var title = $this.data('tooltip') || '';
			label.innerHTML = title;

			var w = window.innerWidth,
			elWidth = label.offsetWidth;

			var xPos = w - ( xOffset + elWidth );
			xOffset = xPos < 0 ? xOffset + xPos - 20: xOffset; 

			$label.css( { left: xOffset, top: yOffset } )
				.animate( { opacity: 1 }, 150 );
		}

		function onMouseLeave(){
			$label.animate( { opacity: 0 }, 50 );			
		}

		function onMouseMove(){
			//$label.css({ left: xOffset, top: yOffset });			
		}
	}
}

	var tooltip = new Tooltip('tooltip');

	$('*[data-tooltip]').on({ 
		 mouseenter: tooltip.onMouseEvent, 
		 mouseleave: tooltip.onMouseEvent, 
		 mousemove: tooltip.onMouseEvent
	});
  
});

</script>