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.
- You can dynamically change the contents of the tooltip using SetHTML function.
This can be particluarly useful in AJAX scenarios.
- 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.
[All trademarks and registered trademarks
appearing on ashishware.com are the property of their respecive
owners.]
Write a comment |
Articles |
DHTML Gallery |
.NET |
About Me |
FAQ
