Flamingo ribbon component: rich tooltips on command buttons

November 1st, 2008

The latest addition in the Flamingo component suite is support for rich tooltips on command buttons. This has been one of the items on the roadmap for version 4.0 (code named Fainnear), and is now available in the latest 4.0dev drop of Flamingo core and 5.1dev drop of Substance Flamingo plugin.

The org.jvnet.flamingo.common.RichTooltip class provides the API to define different parts of the rich tooltip:

  • Title text
  • Optional main image
  • One or more description paragraphs
  • Optional footer image
  • Optional one of more footer paragraphs

To set the rich tooltip on the command buttons, use the following APIs:

  • org.jvnet.flamingo.common.AbstractCommandButton.setActionRichTooltip to set the rich tooltip on the action area of a command button.
  • org.jvnet.flamingo.common.JCommandButton.setPopupRichTooltip to set the rich tooltip on the popup area of a command button (does not apply to toggle command buttons in the JToggleCommandButton class that only has an action area).

In addition, you can set the rich tooltip on the ribbon application menu button with the org.jvnet.flamingo.ribbon.JRibbon.setApplicationMenuRichTooltip API.

Unlike the core Swing tooltips, there are rigid rules that define the location of the rich tooltips. The rich tooltips will appear directly below the associated command button, left aligned with it. Here is a screenshot of an action rich tooltip under Metal:

And here is the popup rich tooltip of the same button:

As you can see, the rich tooltip provides support for multi-paragraph sections with optional images.

When a command button is part of a ribbon band, its rich tooltips will be shown below the ribbon. Here is a rich tooltip of action area of the Paste button in the first ribbon band (note how the tooltip is displayed below the ribbon and does not hide any part of the ribbon):

The left horizontal alignment makes sure that the tooltip is clearly associated with the command button (since there is a considerable vertical space between them). The same command button has a different rich tooltip for the popup area:

As mentioned earlier, you can associate a rich tooltip with the application menu button:

Command buttons in the application task bar show the rich tooltip directly below:

The previous four screenshots were taken under the Windows look-and-feel in Vista. Since one of the most important goals of Flamingo is to support other core and third-party look-and-feels out of the box, the rich tooltips are not an exception. The customization hooks provide complete control over the layout and appearance of the rich tooltips (and these will be illustrated below for Substance), but the rich tooltips should look consistent even without any customizations.

Here is the rich tooltip under Nimbus:

Here is the rich tooltip under Looks PlasticXP (note how it takes the translucent shadow border):

And the rich tooltip of the application menu button:

The rich tooltip under Synthetica Blue Steel:

And under A03 (for the application menu button):

Finally, third-party look-and-feels can customize the appearance of the rich tooltips. Both the layout and the painting itself is customizable via the usual look-and-feel hooks (on the UI delegates), and Substance Flamingo plugin takes an advantage to provide custom gradient fill.

Here is the rich tooltip under the Substance Blue Steel (on the Cut button):

And the rich tooltip on the application menu button under the Substance Autumn:

To see the rich tooltips in action, click the WebStart launch button below:

In this test application the rich tooltips are installed on:

  • the application menu button
  • the Paste button in the Clipboard band
  • the Cut button in the Clipboard band
  • the Paste button in the application taskbar
  • the Bold, Italic, Underline and Strikethrough buttons in the Font band

As always, you are more than welcome to leave comments and report bugs on the project issue tracker, mailing lists or forums.