DojoDynamicTooltipTutorial
A more dynamic Tooltip
In the first example we have shown you how to make a basic Tooltip, it looks nice but you would probably want a lot more when you're working with Wicket. This tutorial will show you how to make a more dynamic Tooltip.
How to make a dynamic Tooltip
The case: Imagine you have a student administration application and you would like to have information tooltips popup when you point at the student's name.
Step one: Let's say you'll have a simple student model like this:
...
public class StudentModel implements Serializable
{
//instant fields are set to create a simple student for testing purposes
private int studentID;
private String lastName;
private String firstName;
private char sex;
public StudentModel(int SID, String lname, String fname, char sex)
{
this.studentID = SID;
this.lastName = lname;
this.firstName = fname;
this.sex = sex;
}
//
...
//getters and setters here, nothing fancy
...
}
make a StudentTooltip.java and StudentTooltip.html something like this. Make sure that StudentTooltip.java extends TooltipPanel and has the necessary imports. You can also see here that we use a constructor which requires an ID, a target component, a model, an X-offset and a Y-offset. The x and Y offsets are the offsets from the targets upper-left corner. So it positions your tooltip relatively to it's target.
StudentTooltip.Java
public class StudentTooltip extends TooltipPanel{
//and I want a constructor with an x, y and a model
public StudentTooltip(IModel model, Component target, int x, int y)
{
super(model, target, x, y);
StudentModel thisStudent = (StudentModel)getModelObject();
//simply add the components to match the HTML
add(new Label("studentid", thisStudent.getStudentID()));
//add a picture which name matches the studentID
add(new Image("photo", new Model(thisStudent.getStudentID() + ".jpg")));
add(new Label("lname", thisStudent.getLastName()));
add(new Label("fname", thisStudent.getFirstName()));
add(new Label("sex", thisStudent.getSex()));
}
}
StudentTooltip.html
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <wicket:panel> <p style="border: 2px ridge rgb(0, 96, 255); padding: 5px; background-color: rgb(193, 234, 249);"> <table> <tr> <td colspan="2"' align="center"><b>Student</b></td> </tr> <tr> <td><i>Student ID: </i><span wicket:id="studentid">id here</span></td><td rowspan="4"><img wicket:id="photo"/></td> </tr> <tr> <td><i>Last name: </i><span wicket:id="lname" align="right">last name here</span></td> </tr> <tr> <td><i>First name: </i><span wicket:id="fname">first name here</span></td> </tr> <tr> <td><i>Sex: </i><span wicket:id="sex">sex</span></td> </tr> </table> </p> </wicket:panel> </body> </html>
As you see, the student Tooltip is nothing more than a panel holding a table, with some labels and an image. The Tooltip contents will be fetched from the supplied student model.
Add the tooltips
Step two: Simply add a new StudentTooltip to your page, and provide it with target components like this:
//add targets for the Student Example
add(stlabel = new Label("stlabel", "Marco van de Haar"));
add(stlabel2 = new Label("stlabel2", "Ruud Booltink"));
...
//Create 2 students to serve as modelObjects for the tooltips
StudentModel student1 = new StudentModel(1234, "van de Haar", "Marco", "m");
StudentModel student1 = new StudentModel(1235, "Booltink", "Ruud", "m");
//add the tooltips for the student and give a StudentModel to use with hte tooltip
add(new Tooltip("studenttooltip", new StudentTooltip(new CompoundPropertyModel(student1), stlabel, 100, 20)));
dd(new Tooltip("studenttooltip2", new StudentTooltip(new CompoundPropertyModel(student1), stlabel, 100, 20)));
And in yourpage.html simply add something like this: <!--student labels-->
<span wicket:id="stlabel">label</span>
<span wicket:id="stlabel2">label</span>
<!--student tooltips-->
<span wicket:id="studenttooltip">tooltipcontent</span>
<span wicket:id="studenttooltip2">tooltipcontent</span>
When you hover over the target component (in this case the student name labels) the Tooltip appears. As you can see we've added some custom style to our Tooltip paragraph. This is a wise thing to do because without any style, our Tooltip will render transparent. This can look cool when you use transparent image to shape your Tooltip, but mostly it is just annoying. 