Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Tooltip behavior

Tooltip on inputs:




Components / Samples

Description

TooltipBehavior will decorates the 'title' attribute for one/several/all element(s) or component(s).

It may have the following usages:

  • on document level:
    this.add(new TooltipBehavior());

  • on a specific html element:
    this.add(new TooltipBehavior("#mySelector"));

  • on a specific wicket component:
    this.add(new TooltipBehavior(JQueryWidget.getSelector(myComponent)));

More info

Tooltip: http://api.jqueryui.com/tooltip/
Position: http://api.jqueryui.com/position/

Since

wicket-jquery-ui-core-1.4.0
wicket-jquery-ui-core-6.2.0

Sources

package com.googlecode.wicket.jquery.ui.samples.jqueryui.tooltip;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.ui.widget.tooltip.TooltipBehavior;

public class DefaultTooltipPage extends AbstractTooltipPage
{
	private static final long serialVersionUID = 1L;

	public DefaultTooltipPage()
	{
		Options options = new Options();
		options.set("position", "{ my: 'center top+3', at: 'center bottom' }");
//		options.set("track",true); //used to track the mouse

		this.add(new TooltipBehavior(options));
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: tooltip</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		Tooltip on inputs:<br/>
		<br/>
		<input type="text" title="This is a sample tooltip" /><br/>
		<br/>
		<input type="text" title="This is another tooltip" /><br/>
	</div>
</wicket:extend>
</body>
</html>