[CONF] Apache Wicket: How to add tooltips (page edited)

Wed, 27 Dec 2006 21:31:52 -0800

Page Edited : WICKET : How to add tooltips

How to add tooltips has been edited by Loren Rosen (Dec 27, 2006).

Change summary:

remove a garbled (and superfluous) header from the beginning of the page

(View changes)

Content:
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="" class="code-quote">"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 _javascript_Reference("addEventJs", new PackageResourceReference(YourApplication.get(), YourPage.class, "_javascript_/addEvent.js")));
add(new _javascript_Reference("sweetTitlesJs", new PackageResourceReference(YourApplication.get(), YourPage.class, "_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 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

Powered by Atlassian Confluence (Version: 2.2.9 Build:#527 Sep 07, 2006) - Bug/feature request

Unsubscribe or edit your notifications preferences

Reply via email to