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>
    



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

comments powered by Disqus