ashishware.com: Site for programming and other things

IFRAME based Javascript Tooltip

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.

Simple IFRAME based tooltip.

Animated Tooltip using IFRAME.

Dropdown (for testing)

Translucent tooltip.

Dropdown (for testing)

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>