Simple Tooltip with CSS and jQuery

Recently I was searching for a tooltip plugin that provides the possibility to show an “advanced” tooltip for each title attribute. “Advanced” means that it should support HTML formatting, like bold, italic or a simple line break. There are several powerful (and over-engineered) plugins out there (e.g. jQuery Tools), however they did not fulfill my requirements. So I did it on my own.

The tooltip should support mouse tracking (the tooltip moves whenever the mouse cursor is moving) and should consider the actual width/height of the browser window (the tooltip should not dissapear when it is near to the browsers’ borders). The code should be self-explanatory and easy adaptable. So lets take a look at the result.

Include actual jQuery version

First of all, go to the jQuery Website and download the lastest jQuery version. Then include it in the header of your html file.

[html]
<script type=”text/javascript” src=”jquery.min.js”></script>
[/html]

Now we can start with the tooltip script.

Writing the tooltip script

With jQuery doing a simple tooltip is very easy. First of all we need to call the function when the document is ready and add some event listeners. In this example the function works for all title attributes. Of course you can change this according to the jQuery API Guidlines. This is the basic structure of the code:

[javascript]
$(function() {
// Default tooltip settings
var offsetX = 15;
var offsetY = 25;
var TooltipOpacity = 0.9;

// Select all tags having a title attribute
$(‘[title]‘).mouseenter(function(e) {

// Get the value of the title attribute
var Tooltip = $(this).attr(‘title’);
if(Tooltip !== ”) {
// Tooltip exists. Assign it to a custom attribute
$(this).attr(‘customTooltip’,Tooltip);

// Empty title attribute (to ensure that native browser tooltip is not shown)
$(this).attr(‘title’,”);
}

// Assign customTooltip to variable
var customTooltip = $(this).attr(‘customTooltip’);

// Tooltip exists?
if(customTooltip !== ”) {
// Append tooltip element to body
$(“body”).append(‘<div id=”tooltip”>’ + customTooltip + ‘</div>’);

// Set X and Y coordinates for Tooltip
$(‘#tooltip’).css(‘left’, e.pageX + offsetX );
$(‘#tooltip’).css(‘top’, e.pageY + offsetY );

// FadeIn effect for Tooltip
$(‘#tooltip’).fadeIn(’500′);
$(‘#tooltip’).fadeTo(’10′,TooltipOpacity);
}

}).mousemove(function(e) {
var X = e.pageX;
var Y = e.pageY;
var tipToBottom, tipToRight;

// Distance to the right
tipToRight = $(window).width() – (X + offsetX + $(‘#tooltip’).outerWidth() + 5);

// Tooltip too close to the right?
if(tipToRight < offsetX) {
X = e.pageX + tipToRight;
}

// Distance to the bottom
tipToBottom = $(window).height() – (Y + offsetY + $(‘#tooltip’).outerHeight() + 5);

// Tooltip too close to the bottom?
if(tipToBottom < offsetY) {
Y = e.pageY + tipToBottom;
}

// Assign tooltip position
$(‘#tooltip’).css(‘left’, X + offsetX );
$(‘#tooltip’).css(‘top’, Y + offsetY );

}).mouseleave(function() {
// Remove tooltip element
$(“body”).children(‘div#tooltip’).remove();
});
});

[/javascript]

That’s it! Now you can change the default settings of the tooltip (offset of tooltip, opacity) as you like.

CSS styling

Finally we will need some styling information for the tooltip element. As you can see in the inline comments I added a note from where you can edit the stylesheet information.

[css]
#tooltip {
position:absolute;
z-index:9999;
opacity: .0;
filter: alpha(opacity=00);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=00)”;

/* Edit from here */
width :auto;
background-color:#efefef;
border:1px solid #cccccc;
padding: 3px;
-moz-box-shadow: 2px 2px 11px #666;
-webkit-box-shadow: 2px 2px 11px #666;
}
[/css]

Result

Now you can use HTML formatting in your tooltip! Download and have a look at the complete example.

Demo: Simple Tooltip