Learning jQuery

In this post, We are going to show you how to create simple stylized tooltip plugin using jQuery. You don't have to use any jQuery plugin to create tooltip. You will learn how easily you can make tooltips using jQuery and CSS. And the good part is that it can be using few lines of jQuery code.

So, lets begin.

The MarkUp

The HTML structure contains number of &lta> hyperlink tags. The hyperlink tag looks familiar to you but there is an additional attribute added to these tags which is "Tooltip". This attribute's value will be used as text of tooltip.

<a class="website" href="http://bit.ly/o60xa7" target="_blank" Tooltip="Mostly asked jQuery Interview Question">jQuery Interview Question</a>
<br/>
<a class="website" href="http://bit.ly/Id8rCr" target="_blank" Tooltip="Best 5 jQuery Captcha Plugins">jQuery Captcha Plugins</a>
<br/>
<a class="website" href="http://bit.ly/db6YZ5" target="_blank" Tooltip="Go to My Blog HomePage">My Blog</a>

You can also have label or span tag, instead of hyperlink tag. But make sure that you include the Tooltip attribute.

Let’s look at the style.

CSS

As you can see from the demo, the tooltip appears next to the tag. So below CSS class, will put the tooltip on absolute position, but also make it look like a box.

.tooltip {
    display: none;
    font-size: 10pt;
    position: absolute;
    border: 1px solid #000000;
    background-color: #FFFFE0;
    padding: 2px 6px;
    color: #990000;
}

jQuery

The Main idea is to take advantage of "hover" function to show tooltip. All the hyperlink tag are assigned "website" class (See HTML). So associate the ".hover" function using the CSS class selector. The .hover method bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

$('.website').hover(function(event) {
   // Hover over code
}, function() {
   // Hover out code
});

As said earlier, hover provides 2 handler event mouseover and mouseout. So on mouseover, we need to following things on hover event to create tooltip.

• First, fetch the value of "Tooltip" attribute from the Hyperlink tag.
• Create a dynamic SPAN tag with class="tooltip". Assign Tooltip variable value to this span tag.
• Now, append the newly created span tag to body of the page and also set it top and left position with respect to current position of mouse. Using event.X and event.Y, you can get mouse position coordinates.
• And animate the span tag, so it looks good.

And on mouseout, simple remove the dynamically created span tag.

$('.website').hover(function(event) {
   var toolTip = $(this).attr('Tooltip');
   $('').text(toolTip)
        .appendTo('body')
        .css('top', (event.pageY - 10) + 'px')
        .css('left', (event.pageX + 20) + 'px')
        .fadeIn('slow');
  }, function() {
    $('.tooltip').remove();
});

If you have seen the demo, then you must have noticed that the tooltip moves along with the mouse, when you are moving the mouse on hyperlink tag. So to achieve this, we need to change top and left position of tooltip on mousemove.

.mousemove(function(event) {
    $('.tooltip')
    .css('top', (event.pageY - 10) + 'px')
    .css('left', (event.pageX + 20) + 'px');
});

So the complete code looks like,

$(document).ready(function() {
    $('.website').hover(function(event) {
        var toolTip = $(this).attr('Tooltip');
        $('<span class="tooltip"></span>').text(toolTip)
            .appendTo('body')
            .css('top', (event.pageY - 10) + 'px')
            .css('left', (event.pageX + 20) + 'px')
            .fadeIn('slow');
    }, function() {
        $('.tooltip').remove();
    }).mousemove(function(event) {
        $('.tooltip')
        .css('top', (event.pageY - 10) + 'px')
        .css('left', (event.pageX + 20) + 'px');
    });
});?

See result below.

Live Demo

Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.