A Tooltip component for Tapestry

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.

@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;
   private ClientElement element;
   private JavaScriptSupport javaScriptSupport;
   private ComponentResources resources;
   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())
            resources.getInformalParameter(parameterName, String.class));
      return options;


The initialization script is

Tapestry.Initializer.setupOpentip = function(params)
      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'>

A ajax usage will be

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

      <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
      <t:block t:id='toolTip'>
         This content is extracted using Ajax
public class ToolTipDemo
   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

Tagged: , , ,

5 thoughts on “A Tooltip component for Tapestry

  1. Nick August 15, 2011 at 3:05 AM Reply

    What is missing on this


    A minus in tapestry is a good base component library and a comunity working on the same direction.

    • tawus August 15, 2011 at 4:39 AM Reply

      My intention here is not to roll out a new component library but to show how things are done in Tapestry. IMHO, having more options is always healthy for a framework. Also having people work in different directions is a plus not a minis. Look at Rails. Rather, the only thing that I feel is a plus about JSF is the different options you get. Sadly that comes at a very high price

  2. Dimitris Zenios October 8, 2011 at 12:15 AM Reply

    Is it possible to post the changed opentip javascript?

  3. David Stubbe Teglbjærg May 15, 2013 at 5:42 PM Reply

    Hi Tawus.

    I know this post is two years old, but I still hope you’ll see this question. I have tried to implement the code in this post, but I cannot get it to work.I get the following error message in the firebug console:
    Uncaught TypeError: Object # has no method ‘addTip’

    Do you know how to fix this error?


  4. Gadwin October 22, 2013 at 6:40 PM Reply

    I would like to use this tricky mixin but it seems like opentip/opentip.js code is missing ? 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: