Buy me a coffee :)

Wicket - jQuery UI

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

Custom tooltips

Black Metal
Death Metal
Doom Metal
Folk Metal
Gothic Metal
Heavy Metal
Power Metal
Symphonic Metal
Trash Metal
Vicking Metal

Components / Samples

Description

CustomTooltipBehavior embeds its content through a user-defined WebMarkupContainer.

Note

There is no selector to be supplied to the CustomTooltipBehavior constructor, but it does not means that the behavior will be applied to the document, like for the TooltipBehavior. The selector will be retrieved from the component the behavior will be bound to (because this is a mandatory condition).

More info

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

Since

wicket-jquery-ui-core-6.12.0

Sources

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

import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ContextImage;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.Fragment;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.ui.samples.data.bean.Genre;
import com.googlecode.wicket.jquery.ui.samples.data.dao.GenresDAO;
import com.googlecode.wicket.jquery.ui.widget.tooltip.CustomTooltipBehavior;

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

	private static Options newOptions()
	{
		Options options = new Options();
		options.set("track", true);
		options.set("hide", "{ effect: 'drop', delay: 100 }");

		return options;
	}

	public CustomTooltipPage()
	{
		this.add(new ListView<Genre>("genres", GenresDAO.all()) {

			private static final long serialVersionUID = 1L;

			@Override
			protected void populateItem(ListItem<Genre> item)
			{
				final Genre genre = item.getModelObject();

				Label label = new Label("genre", genre.getName());
				label.add(new CoverTooltipBehavior(genre.getName(), genre.getCover()));

				item.add(label);
			}
		});
	}

	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(CustomTooltipPage.class));
	}

	// Classes //

	class CoverTooltipBehavior extends CustomTooltipBehavior
	{
		private static final long serialVersionUID = 1L;

		private final String name;
		private final String url;

		public CoverTooltipBehavior(String name, String url)
		{
			super(newOptions());

			this.name = name;
			this.url = url;
		}

		@Override
		protected WebMarkupContainer newContent(String markupId)
		{
			Fragment fragment = new Fragment(markupId, "tooltip-fragment", CustomTooltipPage.this);
			fragment.add(new Label("name", Model.of(this.name)));
			fragment.add(new ContextImage("cover", Model.of(this.url)));

			return fragment;
		}
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: tooltip (custom)</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<div wicket:id="genres" class="genres">
			<span wicket:id="genre" class="genre">[genre]</span>
		</div>
	</div>

	<wicket:fragment wicket:id="tooltip-fragment">
		<div class="w-tooltip">
			<b wicket:id="name">[genre]</b>
			<br/>
			<img wicket:id="cover" class="ui-corner-all" style="width: 100px;" />
		</div>
	</wicket:fragment>

</wicket:extend>
</body>
</html>
.w-tooltip {
	width: 100px;
	height: 130px;
	display: inline-block;
}

.genres {
	display: inline-block;
	margin: 10px;
	width: 200px;
}

.genre {
	cursor: pointer;
	font-style: oblique;
	font-variant: small-caps;
}