daily minutia on Twitter

  • Ironically per my last tweet, here is said photo from Seinfeld on thisisphotobomb.com http://bit.ly/dkAbC8 20 hrs ago
  • @robjohnson Congrats! You are now officially invited to visit my new office. ;-) in reply to robjohnson 20 hrs ago
  • Watching a rerun of Seinfeld with George dealing with photobomb of him the beach with his boss. Was this the original photobomb 20 hrs ago
  • Oh look my old boss http://bit.ly/dcecvK at Albums on the Hill. I used to work there in college, upstairs in the electronica section. 1 day ago
  • Remember in the 90's when they promised a flat screen to those who had a short acceptance speech? Wonder what the prize is these days... 2 days ago
  • More updates...

I'm Ingrid Alongi, a developer in Boulder, Colorado. I'm currently a software engineer at Gnip. My world is now all about API integration and social media data. Previously, at OneRiot, I wrote web applications using Java/Wicket/CSS. I've also got a side project where I use CodeIgniter for PHP and absolutely love it. Diving into JQuery too.

I've been in the web development/interactive agency world for almost 10 years, with most of my experience in building database-driven web applications (PHP, ColdFusion) for consumer facing clients (e-commerce, email marketing, advertising, cms, etc.). Lots of strategy, lots of driving traffic back the web site types of stuff. Oh, and managing an amazing team of developers.

I'm an electronic music snob, ex national level cyclist, I play violin and cello, and have an MA in Women's Studies. You can contact me at ialongi at yahoo . com.

Wicket dojo integration: Tooltip on text field hover example

June 9, 2008, 6:45pm by electromute

Although it is tempting to write your own javascript or use external javascript libraries such as jquery, Wicket has its own built in dojo integration.

This integration makes using dojo pretty easy, but styling your UI is not so straight forward. In this example, I implement the DojoTooltip on a form text field on the hover action. The use of the standard DojoTooltip as well as other dojo/wicket examples can be found here.

I highly recommend installing the Jad decompiler for Eclipse if you are going to delve into this as documentation is very light and having the decompiler will help you understand what is available to you in the libraries.

Here is a screenshot of the wicket example I started from, note the black border–this is not acceptable for my UI:

Wicket DojoTooltip

I need something that looks more like this:

Wicket DojoTooltip

The key to getting exactly what you want is overriding the CSS that comes with the framework.

MyTooltipPage.java:
public class MyTooltipPage extends MyPageTemplate
{
 private WebMarkupContainer hoverTarget;
 public MyTooltipPage()
 {
 super();
 hoverTarget = new WebMarkupContainer("hoverTarget");
 add(hoverTarget);
 DojoTooltip hoverTooltip = new DojoTooltip("hoverTooltip", hoverTarget);
 add(hoverTooltip);
 hoverTooltip.add(new TooltipPanel("tooltipPanel"));
 }
}

Next I create the panel that will display the tooltip upon the hover:

TooltipPanel.java
public class TooltipPanel extends Panel
{
 private Page page;
 public TooltipPanel(String id)
 {
 super(id);
 }
}

Here is the HTML snippet for the input–this is the page where my form field lives that I want to apply the over state on.

MyTooltipPage.html
<span wicket:id="hoverTooltip"><span wicket:id="tooltipPanel "/></span>
<div wicket:id="hoverTarget">
<form>
<input type=”text”>
</form>
</div>

Here is the HTML for the panel that will pop up on the hover state.

TooltipPanel.html
<div id="searchTooltip">
<div class="tooltipPointer"><img src="/images/darkPointerUp.gif" alt="" /></div>
It's a search box you know you want to try it.
enter anything you like and let us find it for you
</div>

Finally, the most important piece of this puzzle is overriding the .dojoTooltip class which is contained in the framework CSS. Using the !important designations will ensure that your attributes are used rather than the default despite the ordering of the CSS files themselves:

Tooltip.css

.dojoTooltip {
background-color: #ffffff !important;
border: 2px solid #ff6d04 !important;
position: fixed !important;
left: 35px !important;
top: 130px !important;
}


#searchTooltip {
margin: 0 5px 10px 5px;
font-weight:bold;
size:14px;
position:relative;
top: -10px;
}


#searchTooltip .tooltipPointer {
position: relative;
z-index: 1000;
top:-3px;
left: 30px;
}

Hope this saves someone some time, enjoy!

Tags: , ,

   Read More »