Useful jQuery tooltip

While I've been developing my own personal site, I've figured out how to do a lot of cool things with jQuery in the process. I've known how to do tooltips for some time. There are literally dozens of ways you can do them. I wanted the most simple solution that looked good, had minimal changes in my code, and that I could use across any part of the site.

I stumbled on a pretty cool way to do it. Here's how:

HTML

The markup is pretty simple actually. It's extremely easy to add to any website for use in all kinds of different areas. You can use it on links, images, text, etc. You must use the class "masterTooltip". If you'd like to change this, you can alter the javascript, which I'll supply later in the article.

    <a class="masterTooltip" href="#" title="This will show up in the tooltip">Your Text</a>
    <p class="masterTooltip" title="Mouse over the heading above to view the tooltip.">Mouse over the heading text above to view it's tooltip.</p>
    <img class="masterTooltip" src="image.jpg" title="Tooltip on image" />

Basically, whatever you add to the title atribute of the link, this will show up as a tool tip. Move over this for an example.

CSS

The CSS for the tool tip is very simple and can be customized any way you'd like. Here is what I'm using.

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#666;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:14px;
	font-family:Arial;
	z-index:999999;
}

jQuery

Please make sure that you have your jQuery script installed in the header of your website. This is the easiest way to do it.

Create your new script by copying this. You can also change the class you'll be using to trigger the tooltip to whatever you'd like, just be consistent though. In this example, we're using "masterTooltip" as the class.

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('
')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
        });
});

Conclusion

That's pretty much it. You can use this tooltip in so many places and it works great. Feel free to contact me for help if you have trouble implementing it.