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


CustomTooltipBehavior embeds its content through a user-defined WebMarkupContainer.


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





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.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;

			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()));


	// Methods //

	public void renderHead(IHeaderResponse 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()); = name;
			this.url = url;

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

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

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

.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;