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 tiptipEvent: In case you want the tool tip to be retrieved using ajax then you can specify the event to respond to on aonmouseoverevent
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
Tagged: component, javascript, tapestry, tooltip
What is missing on this
http://www.chenillekit.org/demo/tapcomp/tooltipdemo
A minus in tapestry is a good base component library and a comunity working on the same direction.
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
Is it possible to post the changed opentip javascript?