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/
Topics:
Opinions expressed by DZone contributors are their own.
Comments