jWicket UI Tooltip

About

This is an integration of the jQuery UI tooltip widget. This Wicket Behavior will generate the JavaScript needed to provide a Wicket Component with a jQuery UI tooltip (v. 1.10.3).

1. [Usage](jWicket UI Tooltip#usage)
2. [Tooltip with content from title attribute](jWicket UI Tooltip#tooltip-with-content-from-title-attribute)
3. [Tooltip with content from data-tooltip attribute](jWicket UI Tooltip#tooltip-with-content-from-data-tooltip-attribute)
4. [Tooltip with dynamic content](jWicket UI Tooltip#tooltip-with-dynamic-content)
5. [Tooltip with custom jQuery selector](jWicket UI Tooltip#tooltip-with-custom-jquery-selector)
6. [General tooltip configuration](jWicket UI Tooltip#general-tooltip-configuration)
7. [Single tooltip configuration for multiple components](jWicket UI Tooltip#single-tooltip-configuration-for-multiple-components)
8. [Custom tooltip styling](jWicket UI Tooltip#custom-tooltip-styling)
9. [Custom jQuery UI library](jWicket UI Tooltip#custom-jquery-ui-library)
10. [License](jWicket UI Tooltip#license)

Usage

Below you can find some examples which should demonstrate the usage.

Tooltip with content from title attribute

component.add(tooltip_1_10_3());

<div wicket:id="component" title="tooltip content">...</div>

$('#component1').tooltip({...});

The generated JavaScript will add a tooltip widget to the component. The component's markup id will be used as the jQuery selector. The tooltip content will be obtained from the component's title attribute. Note: The content of the title attribute will be escaped by jQuery UI.

Tooltip with content from data-tooltip attribute

component.add(tooltip_1_10_3());

<div wicket:id="component" data-tooltip="<strong>tooltip content</strong>">...</div>

$('#component1').tooltip({...});

By using the data-tooltip attribute you can provide the tooltip with markup.

Tooltip with dynamic content

There are several ways to provide dynamic content of tooltips.
content from a String

component.add(tooltip_1_10_3().setContent("content from a String"));

$('#component1').tooltip({content:'content from a String',...});

content from a JS function

component.add(tooltip_1_10_3().setContent(new JsFunction("function(){return 'content from a JS function';}")));

$('#component1').tooltip({content:function(){return 'content from a JS function';},...});

content from another component

component.add(tooltip_1_10_3().setContent(otherComponent));

$('#component1').tooltip({content:$('#markupIdOfOtherComponent').html(),...});

Tooltip with custom jQuery selector

component.add(tooltip_1_10_3(".componentWithTooltip"));

<div wicket:id="component" class="componentWithTooltip">...</div>

$('.componentWithTooltip').tooltip({});

A selector provided to the tooltip factory method will overwrite the default selector. Use this for example if you can't use the component's markup id.

General tooltip configuration

JQueryUiTooltip provides all configuration options of the jQuery UI tooltip widget. It will simply generate the JavaScript code to configure the widget. Please refer to the tooltip API documentation to learn about the configuration of this widget.

component.add(
  tooltip_1_10_3()  
    .setPosition(new JsOption("my", "'center bottom-20'"), new JsOption("at", "'center top'"))
    .setOnOpen("function(event,ui){some js code;}"));

$('#component1').tooltip({position:{my:'center bottom-20',at:'center top'},open:function(event,ui){some js code;}});

Single tooltip configuration for multiple components

// configure tooltips globally
page.add(tooltip_1_10_3(".componentWithTooltip").setPosition(...));

// set dynamic tooltip contents
component3.add(tooltipContent("some dynamic tooltip content"));
component4.add(tooltipContent(anotherComponent));

<div wicket:id="component1" class="componentWithTooltip" title="tooltip content">...</div>
<div wicket:id="component2" class="componentWithTooltip" data-tooltip="<strong>tooltip content</strong>">...</div>
<div wicket:id="component3" class="componentWithTooltip">...</div>
<div wicket:id="component4" class="componentWithTooltip">...</div>

$('#component3').attr('data-tooltip','some dynamic tooltip content');
$('#component4').attr('data-tooltip',$('#anotherComponent1').html());
$('.componentWithTooltip').tooltip({...});

In this example the tooltip behavior is added to the page, provided with a custom selector. The tooltip configuration applies to all matching HTML elements. The tooltip contents will be obtained either from the title attribute or from the data-tooltip attribute. By adding a JQueryUiTooltipContent behavior to the components 3 and 4, their tooltip contents will be written to their data-tooltip attributes.

Custom tooltip styling

To use a custom CSS resource for your jQuery UI tooltips you can provide them like so:

component.add(new JQueryUiTooltip().addCssResource(new CssResourceReference(getClass(), "jquery-ui-custom.css")));

Custom jQuery UI library

You can provide a custom version of the jQuery UI tooltip library like so:

component.add(  
  new JQueryUiTooltip(  
    new JQueryResourceReference(  
      getClass(),  
      "jquery-ui-custom.tooltip.js",  
      JQueryResourceReferenceType.NOT_OVERRIDABLE)));

License

Copyright (c) 2013 Martin Knopf
Licensed under the MIT license.

As a sub project of jWicket, jWicket UI Tooltip makes use of core functionality of jWicket.