I've asked so many questions on this list and got so many friendly and helpful answers, it's time to give something back. This Saturday I migrated 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 at http://del.icio.us/ivaynberg/tooltip 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:

1) Download SweetTitles from http://www.dustindiaz.com/downloads/sweet-titles.zip
2) Replace sweetTitles.js with the one I attached to this email.
3) 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. 4) Put the 2 JavaScript files somewhere into your package (ie org.example.app.javascript) 5) Either put the CSS file into your package as well or add the contents to a CSS file you already use in your application 6) Add this to the head section of the html file you want to use tooltips in:

 <script wicket:id="addEventJs"></script>
 <script wicket:id="sweetTitlesJs"></script>

7) Add the JavaScript resources to your page:

add(new JavaScriptReference("addEventJs", new PackageResourceReference(YourApplication.get(), YourPage.class, "javascript/addEvent.js"))); add(new JavaScriptReference("sweetTitlesJs", new PackageResourceReference(YourApplication.get(), YourPage.class, "javascript/sweetTitles.js")));

8) 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")));

9) Either add the content of the tooltip 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.")));

10) There is no step 10

I hope this is helpful to somebody. Any improvements are very much encouraged, of course!

- Johannes

Attachment: sweetTitles.js
Description: JavaScript source

Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
Wicket-user mailing list

Reply via email to