jQuery Tooltip

example.js

$('.tt[title]').tooltip(200,200); 

jquery.tooltip.js

(function($){

	$.fn.tooltip = function(showTime, hideTime) {
		if(typeof showTime === "undefined") showTime = 200;
		if(typeof hideTime === "undefined") hideTime = 200;

		var $this = $(this);

		$this.hover(function() {
			var offsetLeft = parseInt($this.offset().left),
				offsetTop = parseInt($this.offset().top),
				text = $this.attr('title');

			$this.removeAttr('title');
			$('body').append('<div class="tooltip">'+text+'</div>');

			var $tooltip = $('.tooltip');

			$tooltip.css({
				left: offsetLeft - $tooltip.width() / 2,
				top: offsetTop - $tooltip.outerHeight() - 15
			}).animate({
				opacity: 1,
				top: offsetTop - $tooltip.outerHeight() - 10
			}, showTime);
		}, function() {
			$(this).attr('title', text);
			$tooltip.animate({
				opacity: 0,
				top: offsetTop - $tooltip.outerHeight() - 15
			}, hideTime, function() {
				$(this).remove();
			});
		});
	};

})(jQuery);

style.less

.tooltip {
	background: #434a54;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	line-height: 16px;
	max-width: 200px;
	min-width: 80px;
	opacity: 0;
	padding: 5px 10px;
	position: absolute;
	z-index: 999;

	&:after {
		border-top: 6px solid #434a54;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		content: '';
		display: block;
		margin: 0 0 0 -6px;
		position: absolute;
		left: 50%;
		bottom: -6px;
	}
}