daily minutia on Twitter

  • http://twitpic.com/mr4a - Someone had a little fun with the monkey display. 17 mins ago
  • @storytlr There was a combination of Twitter downtime and and a Gnip upgrade over the last 36 hours. You should be ok now. DM me for help. 56 mins ago
  • Yay! They just replaced the broken anntenae on the marble snail on Pearl Street. I grew up playing on those animals. 1 hr ago
  • Enjoying lunch conversation with my coworkers and taking advantage of the gorgeous weather in Boulder. 3 hrs ago
  • @joshlarson I believe it is true that your nose is the only part of your body that continues to grow your entire life. 5 hrs 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. Diving into Google's data visualization API now. 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 next.

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 develoers.

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: , ,


« Newer Post    Older Post »