A Tooltip component for Tapestry
Join the DZone community and get the full member experience.
Join For Freei 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/
Opinions expressed by DZone contributors are their own.
Trending
-
Microservices With Apache Camel and Quarkus
-
Implementing a Serverless DevOps Pipeline With AWS Lambda and CodePipeline
-
Automating the Migration From JS to TS for the ZK Framework
-
How To Integrate Microsoft Team With Cypress Cloud
Comments