Web development, coding & SEO

tooltip koteako hoverbox jquery

This jquery hoverbox uses title attribute. Works on IE6 and FF. Better than lot of other tooltip solutions. Another approach would be to use jquery tooltip function http://flowplayer.org/tools/tooltip.html

Samples

First example

Some basic formatting

No tooltip here

jQuery Hoverbox

 

Fragment of the markup

<style type="text/css">
	#tooltip {
		padding: 5px 10px;
		background: #cad7e0;
		border: 1px solid #b2bdc3;
		opacity: 0.90;
		width:auto;
	}
</style>

<p>
	<span title="Morbi in sem quis dui placerat ornare.">First example</span>
</p>
<p>
	<span title="Hello, World!">Some basic formatting</span>
</p>
<p>
	<span>No tooltip here</span>
</p>
<p>
	<a href="http://koteako.com/hoverbox/" title="Lorem ipsum dolor sit amet.">jQuery Hoverbox</a>
</p>
<div class="tip" title="div element here">
	div element
</div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script><script type="text/javascript" src="jquery.hoverbox.js">
</script><script type="text/javascript">//inserted directly in to the file jquery.hoverbox.js
$(function(){
	$('span,a,.tip').hoverbox();
});
</script>

Content of jquery.hoverbox.js

/*
 * jQuery Hoverbox 1.0
 * http://koteako.com/hoverbox/
 *
 * Copyright (c) 2009 Eugeniy Kalinin
 * Dual licensed under the MIT and GPL licenses.
 * http://koteako.com/hoverbox/license/
 */
jQuery.fn.hoverbox = function(options) {
	var settings = jQuery.extend({
		id: 'tooltip',
		top: 0,
		left: 15
	}, options);

	var handle;

	function tooltip(event) {
		if ( ! handle) {
			// Create an empty div to hold the tooltip
			handle = $('<div style="position:absolute" id="'+settings.id+'"></div>').appendTo(document.body).hide();
		}

		if (event) {
			// Make the tooltip follow a cursor
			handle.css({
				top: (event.pageY - settings.top) + "px",
				left: (event.pageX + settings.left) + "px"
			});
		}

		return handle;
	}

	this.each(function() {
		$(this).hover(
			function(e) {
				if (this.title) {
					// Remove default browser tooltips
					this.t = this.title;
					this.title = '';
					this.alt = '';

					tooltip(e).html(this.t).fadeIn('fast');
				}
			},
			function() {
				if (this.t) {
					this.title = this.t;
					tooltip().hide();
				}
			}
		);

		$(this).mousemove(tooltip);
	});
};
$(function(){
	$('span,a,.tip').hoverbox();
});

Content of jquery.hoverbox.min.js

/*
 * jQuery Hoverbox 1.0
 * http://koteako.com/hoverbox/
 *
 * Copyright (c) 2009 Eugeniy Kalinin
 * Dual licensed under the MIT and GPL licenses.
 * http://koteako.com/hoverbox/license/
 */
jQuery.fn.hoverbox=function(a){var b=jQuery.extend({id:"tooltip",top:0,left:15},a);var d;function c(e){if(!d){d=$('<div style="position:absolute" id="'+b.id+'"></div>').appendTo(document.body).hide()}if(e){d.css({top:(e.pageY-b.top)+"px",left:(e.pageX+b.left)+"px"})}return d}this.each(function(){$(this).hover(function(f){if(this.title){this.t=this.title;this.title="";this.alt="";c(f).html(this.t).fadeIn("fast")}},function(){if(this.t){this.title=this.t;c().hide()}});$(this).mousemove(c)})};

2008

---