Search
Saturday, September 04, 2010 ..:: Home ::.. Register  Login
 .NET Links Minimize

 Print   
 My Links Minimize

 Print   
 Recent Blog Entries Minimize
Dec 20

Written by: Wil Dobson
12/20/2007 12:40 PM

I use a cool looking alternate tooltip using CSS and javascript for my detailed ALTs.  They follow the cursor around and are fast. Here is how I do it...

Put this at the bottom of your page, between the <body></body> tags..

<!-- This must be in the body of the document: ALTERNATE TOOLTIPS -->
        <div id="toolTipLayer" onpropertychange="" class="toolTipContainer" 
             style="position:absolute; visibility: hidden"></div>
        <script language="JavaScript">
            <!-- // 
            // Run some preliminary stuff, like hooking into mousemove events
            initToolTips(); 
            //-->
        </script>

 Put this code above the <head ...> tag, but within the <html > tags..

 
<script language="JavaScript">
    <!--
        // This is the javascript for floating Alternate Tooltips
        // Example:
        // onMouseOver="toolTip('tool tip text here')";
        // onMouseOut="toolTip()";
        // -or-
        // onMouseOver="toolTip('more good stuff', '#FFFF00', 'orange')";
        // onMouseOut="toolTip()"; 
        /*
        Comment...
        */
        var ns4 = document.layers;
        var ns6 = document.getElementById && !document.all;
        var ie4 = document.all;
        offsetX = 0;
        offsetY = 20;
        var toolTipSTYLE="";
        //var toolTipTextSTYLE="";

        function initToolTips()
        {
          if(ns4||ns6||ie4)
          {
            if(ns4) toolTipSTYLE = document.toolTipLayer;
            else if(ns6) 
            {
                toolTipSTYLE = document.getElementById("toolTipLayer").style;
                //toolTipTextSTYLE = document.getElementById("toolTipText").style;
            }
            else if(ie4) 
            {
                toolTipSTYLE = document.all.toolTipLayer.style;
                //toolTipTextSTYLE = document.all.toolTipText.style;
            }
            if(ns4) document.captureEvents(Event.MOUSEMOVE);
            else
            {
              toolTipSTYLE.visibility = "visible";
              //toolTipSTYLE.display = "none";
            }
            // hook into the onmousemove event, direct it to the layer positioning method
            document.onmousemove = moveToMouseLoc;
          }
        }

        function toolTip(msg, fg, bg)
        {
          if(toolTip.arguments.length < 1) // hide the layer
          {
            if
  

Copyright ©2007 Wil Dobson

Tags:

  
 PS: Minimize

 Print   
 Sponsors Minimize

Get your own Komets drinking Stein!

Get your KOMETS gear!
Proceeds go for player awards @ the end of each season.

  Quality Geek Gear from GeeksWithGuns.com

We use DiscountASP!! Click to join up!


 Print   
 Facebook Minimize

Wil Dobson's Facebook profile


 Print   
 Blogs Minimize

 Print   
 Manage Blog Minimize
You must be logged in and have permission to create or edit a blog.

 Print   
 Blog Archives Minimize

 Print   
Copyright 2008 by Wil Dobson   Terms Of Use  Privacy Statement
DotNetNuke® is copyright 2002-2010 by DotNetNuke Corporation