Table of contents

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 (smile)

Added by Johannes Fahrenkrug 8 August 2006

  • No labels