GQuery Tooltip plugin

You have just to hover the links in the paragraph below to display the tooltip.

//apply the plugin on all elements with an attribute rel="tooltip"
$("[rel='tooltip']").as(Tooltip.Tooltip).tooltip();
                    

Integer dignissim posuere nibh nec venenatis. Nullamalesuada augueid tortor vulputate a luctus libero imperdiet. Curabitur adipiscing elit sodales nisi ullamcorper vel malesuada lacus euismod. Praesent sollicitudin felis eget libero gravida auctor.Nunc facilisis, diam eu porta sollicitudin, metus nisl bibendum magna, nec scelerisque dui mauris et lacus. Aliquam accumsan lorem nunc. Proin nunc enim, malesuada eget tempor non, rhoncus in elit. In sollicitudin condimentum lacus, non ullamcorper ipsum suscipit id. Morbi vitae risus ligula, vita e sodales eros. Curabitur at purus eget neque sagittis consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec felis vel massa dictum venenatis a tristique nunc. blop

Here are the RichTextArea and RichTextToolbar widgets used in the GWT showcase We just enhance the RichTextToolbar by adding nice tooltip for the icons.

//apply tooltip plugin on element of the toolbar defining a title
$("[title]", toolbar).as(Tooltip).tooltip();
                    

TBC

The plugin is configurable. You just need to pass an instance of the TooltipOptions class when you call the plugin :

TooltipOptions options = new TooltipOptions().withDelayHide(100).withDelayShow(200).withPlacement(TooltipPlacement.LEFT);
$("[title]", toolbar).as(Tooltip).tooltip(options);
                    

Often, your tooltip will use always the same options. In order to avoid passing a same instance of TooltipOptions when you call the plugin, you can define the default options used by the plugins by calling static methods defined in the TooltipOptions class:

TooltipOptions.setGlobalDelayHide(100);
TooltipOptions.setGlobalDelayShow(200);
TooltipOptions.setGlobalPlacement(TooltipPlacement.LEFT);
...
//no need anymore to pass an instance of TooltipOptions.
$("[title]", toolbar).as(Tooltip).tooltip();
                    

A third way to configure the tooltip plugin is to specify data-* attributes on the element:

<div id="tooltipable" data-tooltip-placement="LEFT" data-tooltip-delayShow="200" title="my tooltip is fantastic">tooltipable element</div>

//with a widget
$(myWidget).data("tooltip-placement", "LEFT").data("tooltip-delayShow", "200");
                    

Options

new TooltipOptions().withContent(new TooltipContentProvider() {
    private int counter = 0;

    @Override
    public String getContent(Element element) {
        counter++;
        return "This tooltip has been displayed "+counter+ (counter > 1 ? " times" : " time");
    }
});

new TooltipOptions().withContent("My tooltip is  fantastic");