Recently I had to migrate a big web application from Wicket 1.1.1 to 1.2.1. I was using the contrib-dojo Tooltip class, which doesn't work with 1.2, so I had to find another solution. I found Igor's suggestions for tooltips and chose to go with "Sweet Titles".
Sweet titles is great, but the problem is that it automatically attaches tooltips to all <a>, <abbr> and <acronym> tags (correct me if I'm wrong, but I am sure about the <a> tag). I didn't want that, though. I needed tooltips for checkboxes, and I needed to explicitly say which element should show a tooltip and which element shouldn't. So I altered the sweetTitles.js a bit and this is what I came up with:
A quick and hopefully easy guide that will show you how to use pretty tooltips on your Wicket pages.
Step 1: Download SweetTitles
Download SweetTitles
Step 2: Replace sweetTitles.js
Replace sweetTitles.js with this one:
/*
Sweet Titles (c) Creative Commons 2005
http://creativecommons.org/licenses/by-sa/2.5/
Author: Dustin Diaz | http://www.dustindiaz.com
Edited by Johannes Fahrenkrug. The script now honors the showtooltip attribute
*/
var sweetTitles = {
xCord : 0, // @Number: x pixel value of current cursor position
yCord : 0, // @Number: y pixel value of current cursor position
tipElements : ['input', 'td', 'tr', 'textarea', 'select', 'span', 'div', 'a','abbr','acronym'],
// @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you're hovering over
tip : Object, // @Element: The actual toolTip itself
active : 0, // @Number: 0: Not Active || 1: Active
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 curLen = current.length;
for ( j=0; j<curLen; j++ ) {
if (current[j].getAttribute('showtooltip') == 'true') {
addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}
},
tipOut: function() {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
sweetTitles.tip.style.visibility = 'hidden';
},
checkNode : function() {
var trueObj = this.obj;
if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
sweetTitles.obj = this;
tID = window.setTimeout("sweetTitles.tipShow()",200);
sweetTitles.updateXY(e);
},
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 > 25 ?
anch.href.toString().substring(0,25)+"..."
: anch.href);
var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
} else if (anch.firstChild){
addy = anch.firstChild.nodeValue;
} else {
addy = '';
}
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
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';
}
this.tip.style.visibility = 'visible';
this.tip.style.opacity = '.1';
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 80 ) {
this.tip.style.opacity = '.'+newOpac;
this.tip.style.filter = "alpha(opacity:"+newOpac+")";
opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
}
else {
this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,'load',pageLoader);
Step 3: Edit supported tags
At the moment the replacement sweetTitles.js should be able to add tooltips to the following elements: 'input', 'td', 'tr', 'textarea', 'select', 'span', 'div', 'a','abbr','acronym'. If that's not enough (or too much), edit the "tipElements" array at the top of the file.
Step 4: Add the JavaScript files to your Wicket package
Put the 2 JavaScript files somewhere into your package (ie org.example.app.javascript)
Step 5: Add the CSS
Either put the CSS file (sweetTitles.css) into your package as well or add the contents to a CSS file you already use in your application.
Step 6: Add it to your HTML file
Add this to the head section of the html file you want to use tooltips in:
<wicket:head> <wicket:link> <script wicket:id="addEventJs"></script> <script wicket:id="sweetTitlesJs"></script> </wicket:link> </wicket:head>
If you also added the CSS file to your package, your also have to add this to the <wicket:link> section:
<link href="styles/sweetTitles.css" rel="stylesheet" type="text/css">
Of course you have to customize these examples so they'll work with your package structure.
Step 7: Add the JavaScript resources
Add the JavaScript resources to your page:
add(new JavaScriptReference("addEventJs",
new ResourceReference(YourClass.class, "javascript/addEvent.js")));
add(new JavaScriptReference("sweetTitlesJs",
new ResourceReference(YourClass.class, "javascript/sweetTitles.js")));
Alternatively, you can just add these 2 lines to your Wicket's Panel or WebPage without touching the HTML i.e. skip Step 6,
// for Wicket 1.4
add(JavascriptPackageResource.getHeaderContribution("javascript/addEvent.js"));
add(JavascriptPackageResource.getHeaderContribution("javascript/sweetTitles.js"));
// for Wicket 1.3.x
add(HeaderContributor.forJavaScript("javascript/addEvent.js"));
add(HeaderContributor.forJavaScript("javascript/sweetTitles.js"));
Step 8: Add the tooltip
Add the attribute "showtooltip" to the element that should show a tooltip (only elements with this attibute will show tooltips):
someWicketComponent.add(new AttributeModifier("showtooltip", true, new Model("true")));
Step 9: Add the tooltip text
Either add the tooltip text to the element in the html file, using the "title" attribute:
<input type="checkbox" wicket:id="myCheckbox" title="Hi, I am a tooltip."/>
...or add dynamic tooltip texts using an AttributeModifier:
someWicketComponent.add(new AttributeModifier("title", true, new Model("Hi, I am a dynamic tooltip.")));
Step 9a: Remove element's text from the tip
Change
display:block
to
display:none
in the CSS selector div#toolTip p em if you just want to show the text in the Model. Otherwise, the element's text will be appended to the tip.
Step 10: There is no step 10
Well, actually step 10 was to add this to the wiki... But you don't have to do that anymore, obviously 
Added by Johannes Fahrenkrug 8 August 2006