The JavaScript Source: Miscellaneous : Sweet Titles

Home

Miscellaneous

Sweet Titles

This script will display the titles on your links in a very "sweet" manner. The look is customized by using CSS and is easily changed. Degrades very nicely. Additional modifications are available on Dustin's Web site.

The JavaScript Source: Miscellaneous : Sweet Titles

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* Fading Tooltips */
div#toolTip {
  position:absolute;
  width:220px;
  background:#00009C;
  border:2px double #fff;
  text-align:left;
  padding:5px;
  -moz-border-radius:5px;
  z-index:1000;
}
div#toolTip p {
  margin:0;
  padding:0;
  color:#fff;
  font:11px/12px verdana,arial,serif;
}
div#toolTip p em {
  display:block;
  margin-top:3px;
  color:#FFCF31;
  font-style:normal;
  font-weight:bold;
}

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Dustin Diaz :: http://www.dustindiaz.com/ */

function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) { 
        elm.addEventListener(evType, fn, useCapture); 
        return true; 
        }
        else if (elm.attachEvent) { 
        var r = elm.attachEvent('on' + evType, fn); 
        EventCache.add(elm, evType, fn);
        return r; 
        }
        else {
        elm['on' + evType] = fn;
        }
}
function getEventSrc(e) {
        if (!e) e = window.event;

if (e.originalTarget)
        return e.originalTarget;
        else if (e.srcElement)
        return e.srcElement;
}
function addLoadEvent(func) {
var oldonload = window.onload;
        if (typeof window.onload != 'function') {
        window.onload = func;
        } else {
        window.onload = 
                function() {
                oldonload();
                func();
                }
        }
}
var EventCache = function(){
        var listEvents = [];
        return {
                listEvents : listEvents,
        
                add : function(node, sEventName, fHandler, bCapture){
                        listEvents.push(arguments);
                },
        
                flush : function(){
                        var i, item;
                        for(i = listEvents.length - 1; i >= 0; i = i - 1){
                                item = listEvents[i];
                                
                                if(item[0].removeEventListener){
                                        item[0].removeEventListener(item[1], item[2], item[3]);
                                };
                                
                                /* From this point on we need the event names to be prefixed with 'on" */
                                if(item[1].substring(0, 2) != "on"){
                                        item[1] = "on" + item[1];
                                };
                                
                                if(item[0].detachEvent){
                                        item[0].detachEvent(item[1], item[2]);
                                };
                                
                                item[0][item[1]] = null;
                        };
                }
        };
}();

addEvent(window,'unload',EventCache.flush, false);

<script type="text/javascript" src="toolTipLib1.js"></script>

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Dustin Diaz :: http://www.dustindiaz.com/ */

// Additional Info: http://www.dustindiaz.com/sweet-titles/

var toolTipLib = { 
        xCord : 0,
        yCord : 0,
        obj : null,
        tipElements : ['a','abbr','acronym'],
        attachToolTipBehavior: function() {
                if ( !document.getElementById ||
                        !document.createElement ||
                        !document.getElementsByTagName ) {
                        return;
                }
                var i,j;
                addEvent(document,'mousemove',toolTipLib.updateXY,false);
                if ( document.captureEvents ) {
                                document.captureEvents(Event.MOUSEMOVE);
                }
                for ( i=0;i<toolTipLib.tipElements.length;i++ ) {
                        var current = document.getElementsByTagName(toolTipLib.tipElements[i]);
                        for ( j=0;j<current.length;j++ ) {
                                addEvent(current[j],'mouseover',toolTipLib.tipOver,false);
                                addEvent(current[j],'mouseout',toolTipLib.tipOut,false);
                                current[j].setAttribute('tip',current[j].title);
                                current[j].removeAttribute('title');
                        }
                }
        },
        updateXY : function(e) {
                if ( document.captureEvents ) {
                        toolTipLib.xCord = e.pageX;
                        toolTipLib.yCord = e.pageY;
                } else if ( window.event.clientX ) {
                        toolTipLib.xCord = window.event.clientX+document.documentElement.scrollLeft;
                        toolTipLib.yCord = window.event.clientY+document.documentElement.scrollTop;
                }
        },
        tipOut: function(e) {
                if ( window.tID ) {
                        clearTimeout(tID);
                }
                if ( window.opacityID ) {
                        clearTimeout(opacityID);
                }
                var l = getEventSrc(e);
                var div = document.getElementById('toolTip');
                if ( div ) {
                        div.parentNode.removeChild(div);
                }
        },
        checkNode : function(obj) {
                var trueObj = obj;
                if ( trueObj.nodeName.toLowerCase() == 'a' || trueObj.nodeName.toLowerCase() == 'acronym' || trueObj.nodeName.toLowerCase() == 'abbr' ) {
                        return trueObj;
                } else {
                        return trueObj.parentNode;
                }
        },
        tipOver : function(e) {
                toolTipLib.obj = getEventSrc(e);
                tID = setTimeout("toolTipLib.tipShow()",500)
        },
        tipShow : function() {
                var newDiv = document.createElement('div');
                var scrX = Number(toolTipLib.xCord);
                var scrY = Number(toolTipLib.yCord);
                var tp = parseInt(scrY+15);
                var lt = parseInt(scrX+10);
                var anch = toolTipLib.checkNode(toolTipLib.obj);
                var addy = '';
                var access = '';
                if ( anch.nodeName.toLowerCase() == 'a' ) {
                        addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
                        var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
                } else {
                        addy = anch.firstChild.nodeValue;
                }
                newDiv.id = 'toolTip';
                document.getElementsByTagName('body')[0].appendChild(newDiv);
                newDiv.style.opacity = '.1';
                newDiv.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
                if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(newDiv.offsetWidth+lt) ) {
                        newDiv.style.left = parseInt(lt-(newDiv.offsetWidth+10))+'px';
                } else {
                        newDiv.style.left = lt+'px';
                }
                if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(newDiv.offsetHeight+tp) ) {
                        newDiv.style.top = parseInt(tp-(newDiv.offsetHeight+10))+'px';
                } else {
                        newDiv.style.top = tp+'px';
                }
                toolTipLib.tipFade('toolTip',10);
        },
        tipFade: function(div,opac) {
                var obj = document.getElementById(div);
                var passed = parseInt(opac);
                var newOpac = parseInt(passed+10);
                if ( newOpac < 80 ) {
                        obj.style.opacity = '.'+newOpac;
                        obj.style.filter = "alpha(opacity:"+newOpac+")";
                        opacityID = setTimeout("toolTipLib.tipFade('toolTip','"+newOpac+"')",20);
                }
                else { 
                        obj.style.opacity = '.80';
                        obj.style.filter = "alpha(opacity:80)";
                }
        }
};
addEvent(window,'load',toolTipLib.attachToolTipBehavior,false);

<script type="text/javascript" src="toolTipLib2.js"></script>

Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Microsoft Article: BitLocker Encryption on Windows Server 2008
Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site

IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers

Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt

Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES