Skip to content

jWicket UI Tooltip

Jump to bottom
Horsed edited this page Jun 13, 2013 · 4 revisions

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).
Note that jQuery UI 1.10.3 depends on jQuery 1.6+

  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 default jQuery selectors](jWicket UI Tooltip#tooltip-with-default-jquery-selectors)
  6. [Tooltip with custom jQuery selector](jWicket UI Tooltip#tooltip-with-custom-jquery-selector)
  7. [General tooltip configuration](jWicket UI Tooltip#general-tooltip-configuration)
  8. [Single tooltip configuration for multiple components](jWicket UI Tooltip#single-tooltip-configuration-for-multiple-components)
  9. [Custom tooltip styling](jWicket UI Tooltip#custom-tooltip-styling)
  10. [Custom jQuery UI library](jWicket UI Tooltip#custom-jquery-ui-library)
  11. [License](jWicket UI Tooltip#license)

Usage

Below you can find some examples which should demonstrate the usage.
To see some examples running in your browser, run wicketstuff-jwicket-examples and open http://localhost:8080/wicketstuff-jwicket-examples/jqueryuitooltip.

Tooltip with content from title attribute

component.add(tooltip_1_10_3()); // same as new JQueryUiTooltip(JQueryUiTooltip.uiTooltipJs_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().setItems("#" + component.getMarkupId()));
<div wicket:id="component" data-tooltip="<strong>tooltip content</strong>">...</div>
$('#component1').tooltip({items:'#component1',...});

By using the data-tooltip attribute you can provide the tooltip with markup. Note that obtaining content from elsewhere than the title attribute requires you to specify the items option.

Tooltip with dynamic content

There are several ways to provide dynamic content of tooltips.

Content from a String

component.add(
  tooltip_1_10_3()
    .setItems("#" + component.getMarkupId())
    .setContent("content from a String"));
$('#component1').tooltip({content:'content from a String',...});

Content from a JS function

component.add(
  tooltip_1_10_3()
    .setItems("#" + component.getMarkupId())
    .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()
    .setItems("#" + component.getMarkupId())
    .setContent(otherComponent));
$('#component1').tooltip({content:$('#markupIdOfOtherComponent').html(),...});

Note that obtaining content from elsewhere than the title attribute requires you to specify the items option.

Tooltip with default jQuery selectors

If no custom jQuery selectors are provided, default ones will be used.

Adding JQueryUiTooltip to a component

component.add(tooltip_1_10_3()); // markup id of component will be selector
<div wicket:id="component" class="componentWithTooltip">...</div>
$('#component1').tooltip({...});

Adding JQueryUiTooltip to a page

page.add(tooltip_1_10_3()); // document will be selector
$(document).tooltip({...});

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.

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

You can use JQueryUiTooltip to configure your tooltips once and JQueryUiTooltipContent to provide your components with dynamic tooltip contents.

  1. Add JQueryUiTooltip with a custom selector matching all components that should have a tooltip.
  2. Give the items option the same selector.
  3. Add JQueryUiTooltipContent to all components that have dynamic tooltip content. (The tooltip content of all other components matching the tooltip selector, will be obtained from their title attribute.)
// configure tooltips globally
page.add(tooltip_1_10_3(".componentWithTooltip").setItems(".componentWithTooltip"));

component3.add(tooltipContent("some dynamic tooltip content")); // write tooltip content to data-tooltip attribute
component4.add(tooltipContent(anotherComponent)); // write tooltip content to data-tooltip attribute
<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 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. Note that obtaining content from elsewhere than the title attribute requires you to specify the items option.

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

To avoid adding a CSS resource to the response (e.g. when providing a custom tooltip class through setTooltipClass("class")):

component.add(new JQueryUiTooltip().withoutCss());

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.

jQuery UI - v1.10.3 - 2013-05-30

  • http://jqueryui.com
  • Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.tooltip.js
  • Copyright 2013 jQuery Foundation and other contributors Licensed MIT
Clone this wiki locally