daily minutia on Twitter

  • via @BikeCrave: A tribute to cycling legend Laurent Fignon who lost his battle with cancer. http://bit.ly/apec9n. What a legend. 2 days ago
  • Classy. I just hand-poured washer fluid on my car with the wipers going because shit is broke. 2 days ago
  • RT @jvaleski: New Blog Post: "Exits; You're Doing it Right" - http://bit.ly/dmaSvK (Nice post, & I could not agree more with your examples.) 2 days ago
  • @CaroDonahue Happy Birthday! As a convenient gift, you should keep my Spiritual Gangster T-shirt. You are a much better wearer of it than I. 2 days ago
  • Could not have had a better morning. Why, you ask? Because @jmalan dropped off some lemon blueberry scones. Thanks love! They were great. 2 days ago
  • More updates...

I'm Ingrid Alongi, a developer in Boulder, Colorado. I'm a co-founder at Quick Left, a Web Engineering company. I used to be a software engineer at Gnip where API integration and social media data were my world. Prior to that, at OneRiot, I wrote web applications using Java/Wicket/CSS. I've got experience with CodeIgniter for PHP, but mostly use Zend with Doctrine when it comes to PHP. Got some 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. Or, mosey on over to the Quick Left blog to see what I'm up to.

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


«      »