Tweaks to Sweet Titles

Apply to one id or class

Sweet Titles by Dustin Diaz is a fantastic JavaScript package, for adding fading tooltips to your web page.

The out of the box files will apply the Sweet Titles to the whole page, which is cool in most cases, but wasn't for me as it was picking up the links on the menu.

After lots of searching, staring at & tweaking of the JavaScript file, I eventually found a way to point it to just the element I wanted it to appear on.

Look for the

init : function() {

section near the top of the sweetTitles.js file. The line changed/deleted is highlighted in green and the line added is the one highlighted in red below

init : function() {
  if ( !document.getElementById ||
    !document.createElement ||
    !document.getElementsByTagName ) {
    return;
 }
 var i,j;
 this.tip = document.createElement('div');
 this.tip.id = 'toolTip';
 document.getElementsByTagName('body')[0].appendChild(this.tip);
 this.tip.style.top = '0';
 this.tip.style.visibility = 'hidden';
 var tipLen = this.tipElements.length;
 for ( i=0; i<tipLen; i++ ) {
    // var current = document.getElementsByTagName(this.tipElements[i]);
    var current = document.getElementById('footie')
                                               .getElementsByTagName(this.tipElements[i]);
    var curLen = current.length;
    for ( j=0; j<curLen; j++ ) {
      addEvent(current[j],'mouseover',this.tipOver);
      addEvent(current[j],'mouseout',this.tipOut);
      current[j].setAttribute('tip',current[j].title);
      current[j].removeAttribute('title');
    }
  }
},

Explaination

The .getElementById that points to 'footie' is the id you want the fading tooltips to apply to in your css file.

I'm not familiar with JavaScript, but this does actually work and as it took me a week to find, I thought it may save someone some time.

Note : The new line is on two lines because it over shot the end of the <div>. Put it all in one line in the JavaScript file.

Javasript & validating HTML

If you want to conform to W3C standards and meet the (X)HTML Strict DTD you will have to do the following:

JavaScript in the body of the page

Any JavaScript which is inserted inside the <body> of your page must be surrounded by this

<script type="text/javascript" language="javascript">
// your JavaScript goes here
</script>

JavaScript in external file

Any JavaScript which is referenced in an external file, must have this in the <head> section

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

Specifying JavaScript as your scripting language

To explicitly state that your scripts are in JavaScript, you must add this inside your <head> section

<meta http-equiv="Content-Script-Type" content="text/javascript">

browsers will assume that JavaScript is the scripting language by default, but as I found while validating with Validome, the page won't pass the strict dtd without it.

Back to the tooltips map.