A Tooltip component for Tapestry

Taha Siddiqi

Jul. 15, 11 · Interview

Like (0)

Save

5.13K Views

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/

Integration Event Library

Opinions expressed by DZone contributors are their own.

Comments

A Tooltip component for Tapestry

Popular on DZone

Partner Resources