Thursday, February 19, 2009

Adding jQuery tooltips to Wicket pages

Tooltips are little popup windows that appear on mouse over and are one handy way to provide context-sensitive help to users. It's easy to add tooltips to form fields (or any other tags, really) using jQuery and Wicket. See the screenshot for an example.





Here's how to add tooltips to your Wicket forms. I'm using the label tag to associate the text next to the field with its field, and assigning the tooltip to the label field also. This means that the user will see the tooltip whether they mouse over the label or the field. The first example is the simplest, where I provide a string for the tooltip directly in the code. The second example uses Wicket's powerful model capability, which means you can get the tooltip string from a properties file, a bean property, even a database.



There are many jQuery plugins that can display tooltips. I'm using this one., which I found easy to use and very well-behaved on various browsers. There are lots of options for styling, but I'm using the default style.

I'm using version 1.4-rc2 of Wicket, version 1.2.6 of jQuery, and version 1.3 of the jQuery Tooltip plugin. I put the .js files in the folder src/main/webapp/js of my maven project, and the .css file in the folder src/main/webapp/css of my maven project.



Tooltips.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<wicket:head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript">
$(function() {
$('.tooltip').tooltip();
});
</script>
<link rel="stylesheet" href="css/jquery.tooltip.css" />
</wicket:head>

<body>
<form action="" wicket:id="myform">
<fieldset>
<label for="one" wicket:id="label.one">My text field 1:</label>
<input id="one" wicket:id="text.one" type="text"/>
</fieldset>
<fieldset>
<label for="two" wicket:id="label.two">My text field 2:</label>
<input id="two" wicket:id="text.two" type="text"/>
</fieldset>
</form>
</body>
</html>

Tooltips.java


public class Tooltips extends WebPage {

public Tooltips() {
super();

Form<String> form = new Form<String>("myform");
add(form);

SimpleAttributeModifier am1 = new SimpleAttributeModifier("title", "hi tooltip 1");
AttributeAppender tt = new AttributeAppender("class", new Model<String>("tooltip"), " ");
Label label1 = new Label("label.one", new Model<String>("My Form Field Label 1:"));
label1.add(am1);
label1.add(tt);
form.add(label1);
TextField<String> textField1 = new TextField<String>("text.one");
textField1.add(am1);
textField1.add(tt);
form.add(textField1);

AttributeModifier am2 = new AttributeModifier("title", true, new Model<String>("hi tooltip 2"));
Label label2 = new Label("label.two", new Model<String>("My Form Field Label 2:"));
label2.add(am2);
label2.add(tt);
form.add(label2);
TextField<String> textField2 = new TextField<String>("text.two");
textField2.add(am2);
textField2.add(tt);
form.add(textField2);

}
}

1 comment:

Alexander Lipatov said...

Useful post bro! Adding tooltips to whole project is a pain...