J2EE developer with over 7 years of experience in designing and implementing enterprise j2ee solutions based on open source technologies like Tapestry, Hibernate, Spring. Current interests include Tapestry, Plastic, Spock, Scala. Taha is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. You can read more from them at their website. View Full User Profile

A Tooltip component for Tapestry

07.14.2011
| 3800 views |
  • submit to reddit

I was thinking of adding tooltips using prototip but found a very good free solution in Opentip. This is a very nice library and very easy to integrate. I was able to integrate it with only a single modification to the script and that was to replace the default ajax support with the Tapestry’s own ajax support.

The component takes three arguments

  • tip: The tool tip to display.
  • tipTitle: The title of the tool tip
  • tipEvent: In case you want the tool tip to be retrieved using ajax then you can specify the event to respond to on a onmouseover event

The component is very simple as all the hard work has already been done by the authors of the script.

@SupportsInformalParameters
@Import(library = {"opentip/opentip.js", "opentip/opentip_init.js"}, stylesheet = "opentip/opentip.css")
public class ToolTip
{
   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String tip;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String tipTitle;

   @Parameter(defaultPrefix = BindingConstants.LITERAL)
   private String tipEvent;

   @InjectContainer
   private ClientElement element;

   @Inject
   private JavaScriptSupport javaScriptSupport;

   @Inject
   private ComponentResources resources;

   @AfterRender
   void addJavascript()
   {
      JSONObject params = new JSONObject();

      params.put("elementId", element.getClientId());
      params.put("tipTitle", tipTitle);
      params.put("tip", tip);

      if(tipEvent != null)
      {
         params.put("url", createAjaxTipEvent());
      }

      params.put("options", createOptionsFromInformalParameters());

      javaScriptSupport.addInitializerCall("setupOpentip", params);
   }

   private String createAjaxTipEvent()
   {
      return resources.createEventLink(tipEvent).toURI();
   }

   private JSONObject createOptionsFromInformalParameters()
   {
      JSONObject options = new JSONObject();

      for(String parameterName: resources.getInformalParameterNames())
      {
         options.put(parameterName,
            resources.getInformalParameter(parameterName, String.class));
      }

      return options;
   }

}

The initialization script is

Tapestry.Initializer.setupOpentip = function(params)
{
   if(params.url)
   {
      params.options.ajax = {};
      params.options.ajax.url = params.url;
   }

   $(params.elementId).addTip(params.tip, params.tipTitle, params.options);
};

A typical usage for an inline tooltip will be

<div t:mixins='tawus/tooltip' t:type='any' t:tip='My Tip'
     t:tipTitle='My Ajax Tooltip'>
</div>

A ajax usage will be

<html xmlns:t='http://tapestry.apache.org/schema/tapestry_5_1_0.xsd' xmlns:p='tapestry:parameter'>

   <body>
      <div t:mixins='tawus/tooltip' t:type='any'
           t:tipEvent='toolTip' t:tipTitle='My Ajax Tooltip'>
      This is text, hover over it to see the tooltip
      </div>

      <t:block t:id='toolTip'>
         This content is extracted using Ajax
      </t:block>
   </body>
</html>

 

public class ToolTipDemo
{
   @Inject
   private Block toolTip;

   Object onToolTip()
   {
      return toolTip;
   }
}

Note if both tip and tipEvent are specified, the tipEvent takes precedence and ajax content is only shown

From http://tawus.wordpress.com/2011/07/12/a-tooltip-component-for-tapestry/

Published at DZone with permission of Taha Siddiqi, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)