Animated Tooltip Javascript

Yes, another javascript tooltip. You can download the ToolTip.js file here. It is a <div> based tooltip, with optional support for animation. With some creativity and your own code, it can prove quite useful. Check out yourself:

Move your mouse over any item to see it in action:

Using the Tooltip.js

  • Include the Tooltip.js script in your web page.
    <script language="javascript" src="js/Tooltip.js"></script>
    
  • Inside the body of document place a <div> tag that serves as body of tooltip. You need to specify height and width in pixels. You can apply any CSS to it for rich formatting .
    <div id="a" style="background-color:ivory;width: 150px;
     height: 49px;border: solid 1px gray; text-align: center;">
    </div>
    
  • Write the following script after </body> tag.
    <script>
    var t1=null;
    var l1="Tooltip for line one";
    var l2="Tooltip for line two";
    function init()
    {
     t1 = new ToolTip("a",false);
    }
    </script>
    
    First we declare a javascript variable 't1' for our tooltip. This is followed by two variables 'l1' and 'l2' to hold strings. The function init() creates a new ToolTip object. First parameter to the function is ID of the <div>. Second parameter is set to false indicating we dont want an animated tooltip. If we set it to true then we can specify animation speed as third parameter. See the examples for more details.
  • To assign tooltip to any object use the following syntax:
    <strong>
    Move your mouse over following lines:<br><br>
    <span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
    Line One
    </span><br>
    <span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
    Line Two
    </span>
    </strong>
    
    We show tooltip when mouse moves over the content and hide it when the mouse moves out. Here, t1 is the tooltip object we created, event should be always passed and 'l1' and 'l2' contain text to be displayed for each tooltip. This text can contain any valid HTML content.
    If you notice, in the above code we check if the object is not null using 'if(t1)' statement. This is required because the <span> could be rendered before the javascript for tooltip is parsed. I am working on a elegant solution for this. The 'if' statement can be dropped in FireFox, in IE doing so might give error to the user, if he moves mouse over the <span> tag.
  • Finally and most important, call the init() function when the page loads.You can also use Event.observe or event.connect construct to add multiple handlers to 'load' event instead of assigning a single one as shown in the code below.
    <body onload=init()>
    
  • You can dynamically change the contents of the tooltip using SetHTML function. This can be particluarly useful in AJAX scenarios.
    t1.SetHTML(strHTML);
    
  • The full code is given below:
    <html>
    <head>
    <script language="javascript" src="js/Tooltip.js"></script>
    <LINK rel="stylesheet" type="text/css" href="styles/StyleSheet.css">
    
    </head>
    <body onload=init()>
    
    <strong>
    Move your mouse over following lines:<br><br>
    <span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
    Line One
    </span><br>
    
    <span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
    Line Two
    </span>
    </strong>
    
    <div id="a" style="background-color:ivory;width: 150px;
     height: 49px;border: solid 1px gray; text-align: center;">
    </div>
    
    </body>
    <script>
    
    var t1=null;
    var l1="Tooltip for line one";
    var l2="Tooltip for line two";
    function init()
    {
     t1 = new ToolTip("a",false);
    }
    
    </script>
    </html>
    

Features

  • It is free. Read the copyright notice in the Tooltip.js file
  • Works with FireFox and IE.
  • Easily create tooltip from existing <div>.This gives you the opportunity of modifying the contents of the tooltip and its appreance using an IDE.
  • Contents of the tooltip can be modified dynamically. This makes it suitable for use with AJAX.
  • Adjustable animation speed.

Limitations

  • Not tested on other browsers.
  • Base on <div>. So be careful with dropdowns.
A very simple tooltip
Animated tooltip !
The speed of animation can be varied.
A translucent tooltip!
Tooltip with background, opacity and animation.



Copyright (c) 2007-2014 Ashish Patil . Please read FAQ for more details.

comments powered by Disqus