These days I have been getting lot of request for help regarding tooltips. One frequent question is this:
"Can I show a different webpage inside the tooltip ?"
To do this I created the IFRAME based tooltip.
You can download the IfrmToolTip.js file here.
It is an <iframe> based tooltip, which supports almost all features of my <div>
based tooltip.
Using the Tooltip.js
This tooltip works excatly same as my <DIV> based tooltip, with following exceptions:
- The function Tooltip.Show() takes two arguments, first is event and second is the URL.
For more details check out the source code for this page.
<span class="ttip" onmouseover=if(ttip.Show)ttip.Show(event,'s2.htm')
onmouseout=if(ttip.Hide)ttip.Hide(event)>
Show tooltip here.
<span>
- The method Tooltip.SetHTML has been removed. Since it uses an IFRAME, a URL is expected to show contents.
- This tooltip also solves the infamous problem of <DIV> over <SELECT>, seen in older versions of IE.
-
Attached below is complete source code of a sample page using this tooltip script:
<html>
<head>
<script language="javascript" src="IfrmTooltip.js"></script>
</head>
<body onload=init()>
<UL>
<LI><span class="ttip" onmouseover=if(t1.Show)t1.Show(event,'s1.htm')
onmouseout=if(t1.Hide)t1.Hide(event)>
<a>Simple IFRAME based tooltip.</a></span><br></LI>
<LI><span class="ttip" onmouseover=if(t2.Show)t2.Show(event,'s2.htm')
onmouseout=if(t2.Hide)t2.Hide(event)>
<a>Animated Tooltip using IFRAME.</a></span><br/></LI>
<LI><span class="ttip" onmouseover=if(t3.Show)t3.Show(event,'s3.htm')
onmouseout=if(t3.Hide)t3.Hide(event)>
<a>Translucent tooltip.</a></span><br></LI>
</UL>
<iframe id="a" src='s1.htm' style="background-color:ivory;width: 250px; height: 90px;
border:solid 1px gray; text-align: center;"></iframe>
<iframe id="b" src='s1.htm' style="background-color:white;width: 250px; height: 270px;
border:solid 1px gray; text-align: center;"></iframe>
<iframe id="c" src='s1.htm' scrolling="no" style="background-color:white;width: 250px;
height: 270px;border: solid 1px gray; text-align:center;filter: alpha(Opacity=75);
opacity:0.75"></iframe>
</body>
<script>
var t1,t2,t3;
function init(){
t1 = new ToolTip("a",false);
t2 = new ToolTip("b",true,40);
t3 = new ToolTip("c",true,40);
}
</script>
</html>
[All trademarks and registered trademarks appearing on ashishware.com are the property of their respecive owners.]
Write a comment |
Articles |
DHTML Gallery |
.NET |
MyBlog |
About Me |
FAQ
