Creating Awesome CSS And jQuery Based Tool Tips

Websites and web programs now a days are rapidly growing towards rich user interface. One of them is tooltips, it shows you the number of information when you hover yur mouse over the text, image or any content. This makes your website or blog much more user friendly and informative.

For example, let’s say that you have a link saying CLICK HERE. Previously user will have to click there to see what does really happen when someone clicks there. But now time has changed, you can just hover yourmouse over CLICK HERE link and find out more information about it.

Other example includes our Microsoft windows itself. Whenever we hover in specific icon, some information pops up in yellow box, well, that is called tooltip.

In this tutorial, I am teaching you how to create tooltips not just yellow but several others for your website or blog.

Let’s get started from the basic.

Using title in image or anchor tag enables you to show-up a tool tip with whatever is written inside title.

For example,

<a href=”http://www.google.co/” title=”Click here to go to Google’s website. “>Google</a>

It will show the result as in the image below:

The above example is only a basic example, it doesn’t use any javascript. This will enable user withoutjavascript to see the tooltip easily. It is also a simple tool tip.

To customize it according to your need you’ll have to use jquery(minimized javascript library) and override the default script.

We’ll call the jquery from Google API using following syntax:

<script language="JavaScript">

ShowTooltip = function(e)

        var text = $(this).next('.show-tooltip-text');

        if (text.attr('class') != 'show-tooltip-text')

               return false;

        text.fadeIn()

               .css('top', e.pageY)

               .css('left', e.pageX+10);

        return false;

HideTooltip = function(e)

        var text = $(this).next('.show-tooltip-text');

        if (text.attr('class') != 'show-tooltip-text')

               return false;

        text.fadeOut();

SetupTooltips = function()

        $('.show-tooltip')

               .each(function(){

                       $(this)

                               .after($('<span/>')

                                      .attr('class', 'show-tooltip-text')

                                      .html($(this).attr('title')))

                               .attr('title', '');

})

               .hover(ShowTooltip, HideTooltip);

$(document).ready(function() {

        SetupTooltips();

});

</script>

The above javascript language is simple if you understand it well.

ShowTooltip has a function to show you the tool tip. It will show the tool tip as per the definition in it’s function.

Before it loads the tool tip it first make sure that, the CSS class show-tooltip-text do exist otherwise it will result default tool tip supported by your browser.

var text = $(this).next('.show-tooltip-text');

if (text.attr('class') != 'show-tooltip-text');

In the script above variable text is set up. In our case, we’ve used text.fadeIn() to Fade in the tool tip. Again we’ve defined the location of tooltip to show using e.PageX and e.PageY (these records your mouse location). You can add/subtract integer value with “+” or “-“ to change the location of tool tip. For example,

.css(‘left’, e.pageX+10);

As in the script above, we’ve added inter value of 10. ShowTooltip was in the case if the mouse hovered over the text. To hide it again we’ll define new function if the Hover over the object is false. HideTooltip holds the function to fade it out normally. SetupTooltips creates a new span to the tag wherever the class show-tooltip is applied and adds another class show-tooltip-text to the span tag. Thus ShowTooltip and HideTooltip works accordingly with the SetupTooltips variable. Now to make the tool tips visible, we’ll have to add some style to it. CSS:

span.show-tooltip-text {

display: none;

position: absolute;

font-size: 0.9em;

background: #000000$;

padding: 6px;

padding-left: 12px;

padding-right: 12px;

color: white;

Now you are done. Whenever you want to show tool tips in the specific format you want do add the following format to your link or image or any other tag.

<a href=”#” title=”Title for tooltips” class=”show-tooltip”>Text goes here</a>
Or
<span class=”show-tooltip” title=”title for tooltips”> Text goes here </span>

Put the overall code in the following format.