Creative Studio – Lewro

Last week I received question – how do I create tooltip, the one which you can see on my portfolio page. I have to say, at the time I was creating that tooltip I was not using jquery so the code in my js file will look different.
If you are not fully sold on jquery I will try to show you how this can be done very quickly and easy way.

First of all you need the jquery library. The best way is to link it from google repository so you always get the last version and it could be already cashed if the user comes from the site which uses the same technique.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Following good practice, insert your javascript link at the end of your page. One hint I would recommend in here. If you use software like Coda or other which allows you to create spinets (pieces of reusable code), create one for jquery. That way I can just type jquery and press TAB and this link will appear in my editor.

So lets move on. Create your own javascript file and link it from the bottom of the page again. It does not matter what will be the name of this file. Now open the file in your favorite text editor Coda or Text Mate. Just kidding these are my favorite editors yours might be Komodo or something else, but not Dreamweaver. Just kidding.

So what will be the idea. The tooltip code itself will not obviously be sitting in your html because it would not make any sense if someone browse your site with css turned off. So will need to bring the html code for it via javascript. In this case jquery. But the element will have css defined in your css file so it looks pretty.

Whatever we put inside this function will be called when the page finished loading. $ means jquery.

$(function (){

});

So lets generate span with the id of portfolio_tooltip and text inside

$(function (){
  $('<span id="portfolio_tooltip">Tooltip text</span>');
});

The previous code would generate the span but would not insert it into the page so we now have to decide where we want to insert the element. Lets say we want to put it before div with id portfolio_cover.

$(function (){
  $('<span id="portfolio_tooltip">Tooltip text</span>').insertBefore('#portfolio_cover');
});

Now we should have our span visible in the page. You would position it with css, used background property to assign pretty background image and if your image contains the text (as mine does) do not forget to shift the text away using text-indent: -999999px;

So there is only one more thing we want to do here. If someone clicks on the tooltip it should disappear. Which means in reality turning the css display property from block to none.

$(function (){
  $('#portfolio_tooltip").click(function(){
    $(this).hide();
  });
});

You could also let the tooltip fade away

$(function (){
  $('#portfolio_tooltip").click(function(){
    $(this).fadeOut(2000);
  });
});

You do not need to specify the time as I did in this case (2000). The time in milliseconds is optional.

This was probably the easiest way to produce this tooltip. There are so many ways how to do things like this. We could for example generated another span which would represent the close button and then only hide the tooltip when the close button is clicked not the whole tooltip.

Last note. I have not tested this code. I have just typed it from the top of my head but if you find that something does not work as it should let me know and I can fix it in millisecond as we fadeout the tooltip.