WP-Mix

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)

Bonus: Example

Here is an example of the “dead simple tooltips” technique taken from my free WordPress plugin, Simple Ajax Chat. This example shows further embellishments, styles, and so forth.

jQuery(document).on({
	mouseenter: function() {
		var item = jQuery(this);
		var link = item.children('a');
		var title = item.attr('title');
		item.data('tip', title).removeAttr('title');
		link.css({ 'cursor' : 'help' });
		item.css({ 'position' : 'relative', 'display' : 'inline-block', 'cursor' : 'help' });
		jQuery('<div class="tooltip"></div>').text(title).appendTo(item);
		jQuery('.tooltip').css({ 
			'position' : 'absolute', 'z-index' : '9999', 'top' : '-2px', 'left' : '105%', 'line-height' : '16px',
			'padding' : '5px 10px', 'font-size' : '12px', 'font-weight' : 'normal', 'white-space' : 'nowrap',
			'color' : '#333', 'background-color' : '#efefef', 'box-shadow' : '0 5px 15px -5px rgba(0,0,0,0.5)'
		});
	},
	mouseleave: function() {
		var item = jQuery(this);
		item.attr('title', item.data('tip'));
		jQuery('.tooltip').remove();
	},
	mousemove: function(e) {
		// var x = e.pageX + 20;
		// var y = e.pageY - 20;
		// jQuery('.tooltip').css({ top: y, left: x });
	}
}, '.sac-chat-name');

I leave that here as example for your information, reference, etc. Some of the functionality is commented out (disabled) in the mousemove function. Feel free to enable those three lines to see the effect.