Dustin Diaz hat mit SweetTitles eine sehr elegante Lösung zur verbesserten Darstellung von Tooltips erstellt. Ich habe das JavaScript jetzt mal probeweise auch auf dieser Site eingesetzt und dabei noch mal ein klein wenig an meine Bedürfnisse angepasst.

Zum einen unterdrücke ich die stets erfolgende Ausgabe des Protokoll-Prefix “http://”. Die so gewonnen 7 Zeichen schlage ich auf die URL-Ausgabe drauf, so das ich statt 25 Zeichen nun 32 Zeichen der URL anzeigen kann. Ferner unterdrücke ich die URL-Ausgabe ganz, wenn die URL “meine” Domain oder “static.flickr.” oder “javascript:” enthält. Es sieht einfach eleganter aus, wenn eine URL nur dann angezeigt wird, wenn es sich um einen externen Link handelt. Das Unterdrücken der URL-Ausgabe bei Vorhandensein von “JavaScript:” sorgt dafür das Items, die mit JavaScript belegt sind nicht mit einem SweetTitle versehen werde. Gerade bei aufklappbaren Listen (z.B. Kategorieliste per WP-dTree) würde es andernfalls sehr störend wirken.

Da im Original immer eine URL ausgegben wird, gibt es auch immer einen Tooltipp. Bei meiner Variante kann es nun aber vorkommen, dass die URL nicht ausgeben wird. Wenn dann nun noch der Tooltipp leer ist, muss das natürlich erkannt werden so dass in diesem Fall kein Tooltipp ausgeben wird.

Folgende kleine Änderungen am Quellcode /wp-content/themes/#your_theme_name#/js/sweetTitles.js sorgen für dieses geänderte Verhalten:

[JAVA]
//…
tipShow : function() {
var scrX = Number(this.xCord);
var scrY = Number(this.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = this.checkNode();
var addy = ”;
var access = ”;
if ( anch.nodeName.toLowerCase() == ‘a’ ) {
addy = (anch.href.length > 32 ? anch.href.toString().substring(0,32)+”…” : anch.href);
addy = addy.replace(‘http://’,”);
if ( !addy.search(‘lars-schenk.’)) addy = ”;
if ( !addy.search(‘static.flickr.’)) addy = ”;
if ( !addy.search(‘javascript:’)) addy = ”;
var access = ( anch.accessKey ? ‘ [‘+anch.accessKey+’] ‘ : ” );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = “

“+anch.getAttribute(‘tip’)+”“+access+addy+”

“;
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) { this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px'; } else { this.tip.style.left = lt+'px'; } if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) { this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px'; } else { this.tip.style.top = tp+'px'; } if (addy || anch.getAttribute('tip')) this.tip.style.visibility = 'visible'; this.tip.style.opacity = '.1'; this.tipFade(10); } //... [/JAVA] Bekannte Probleme: Wenn SweetTitles ein Title-Attribut in einem Anchor-Tag rendert, welches um ein Image-Tag gelegt ist, un dieses Image-Tag ein Alt-Tag enthält, so wird beim IE der intrinsinc Tooltipp zusätzlich zum SweetTitle-Tooltipp gerendert. Daher sollten bei einem verlinkten Image-Tag das ALT-Attribut stets mit alt=”” angegeben werde.