WP-Mix

A fresh mix of code snippets and tutorials

Dead Simple Tooltips

Finding a decent tooltip script takes a lot of work, searching, testing, fiddling. Often, it’s much quicker and easier to simply roll your own, maybe starting from something very basic and simple. The problem is that finding a super simple starting point for tooltips is next to impossible; the few scripts that are available aren’t simple enough or assume something weird about the setup. So to help save you some time, here is my own “dead simple” tooltips script, 100% free and open source for all.

JavaScript/jQuery

// Dead Simple Tooltips
$('.tip').hover(function() {
	var title = $(this).attr('title');
	$(this).data('tip', title).removeAttr('title');
	$('<div class="tooltip"></div>').text(title).appendTo('body').fadeIn();
},function() {
	$(this).attr('title', $(this).data('tip'));
	$('.tooltip').remove();
}).mousemove(function(e) {
	var x = e.pageX + 20;
	var y = e.pageY - 20;
	$('.tooltip').css({ top: y, left: x });
});

This works out of the box with the following HTML and CSS..

HTML

<a class="tip" href="#" title="Dead Simple Tooltips">Example</a>

Basically all that’s required for the HTML is a link that includes a title and a class of .tip.

CSS

.tooltip { 
	display: none; position: absolute; z-index: 1000; 
	padding: 10px; color: #fff; background-color: #000; 
	}

You can see this technique in action here at WP-Mix. Scroll down about halfway on any post or archive and notice the fade-in post-nav links on the left and right sides of the screen. Hover over either of those links to see the tooltips magically appear. If you check the source, you’ll notice that some slight modifications have been made, but the Dead Simple Tooltips script was the starting point.

Download the Demo

Check out the Dead Simple Tooltips Demo (1K zip file)

★ Pro Tip:

SES Pro