Cool looking jQuery Tool Tip

One of the feature that is used by web application is tool tip. Browsers renders “title” attribute as tool tip by default.
Most of the time the tool tip provided by browser doesn’t look good and in most cases its not consistent. The default tool tip would look different in Firefox, Chrome, IE etc.
For consistency and better look we turn to jquery plug-ins. One of them I came across is http://flowplayer.org/
I am going to walk through an example of how it could be implemented.

First of lets start with a simple page with one image and a title.

<html>
    <head>
    <title> Tool Tab Example </title>
    </head>
<body>
    <img src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hdr-main.gif" title="CNN LOGO"/>
</body>
</html>

With the code above, our tool tip will look similar to one below:

Now, lets add the jQuery and tool tip plugin library by adding following line in the section

    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
    <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>

So at this point we are ready to use the tool tip, to activate it we will put following code in the head

<script>
      $(document).ready(function () {
              $('img[title]').tooltip();
        });
    </script>

here we are saying that use “title” property in the “img” tag as tool tip
just by adding this we see that tool tip appears different than default one provided by the browser. Currently its little off to top and gets cuts of, we will fix that next…

So, now we will make the tool tip appear at the bottom center. It is pretty easy to do, we will just update how the tooltip is called by doing the following

$('img[title]').tooltip({position:'bottom center'});

Now the tool tip appears center bottom of the image, looks lot better than before.
Now we will apply a nicer CSS.
Before we do that I am going to share the code I have so far:

<html>
    <head>
    <title> Tool Tab Example </title>
    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
    <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    <script>
      $(document).ready(function () {
        $('img[title]').tooltip({position:'bottom center'});
        });
        
    </script>
    </head>
<body>
    <img src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hdr-main.gif" title="CNN LOGO"/>
</body>
</html>

Now, Lets add some CSS to make it look better:

<html>
    <head>
    <title> Tool Tab Example </title>
    <style>
    /* tooltip styling. by default the element to be styled is .tooltip  */
        .tooltip {
                display:none;
                background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
                font-size:12px;
                height:70px;
                width:160px;
                padding:25px;
                color:#fff;	
        }
    </style>
    
    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
    <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    <script>
      $(document).ready(function () {
        $('img[title]').tooltip({position:'bottom center'});
        });
        
    </script>
    </head>
<body>
    <center>
    <img src="http://i.cdn.turner.com/cnn/.element/img/3.0/global/header/hdr-main.gif" title="CNN LOGO"/>
    </center>
</body>
</html>

Only thing we added is the “style” block inside the “head”. and it makes it look lot better:

This concludes applying a tool tip using a jquery plugin.

More info could be found on their site:
http://flowplayer.org/tools/tooltip/index.html

We can do lot more than what I have pointed out above…

Enjoy….

Advertisements