TooltipExtension Add-on

Extension for creating custom and customizable tooltips for any Vaadin 7 or 8 Component!

With this extension you can build a custom tooltip for any Vaadin Component (anything extending com.vaadin.ui.AbstractComponent). Note: adding a custom tooltip removes the built-in tooltip added with setDescription().

Set TooltipExtensionBuilder specific styles that are added to all components using the Builder, and for tooltip specific styles give them unique ids. The tooltip builder has an API for four default positions for tooltips; TOP, BOTTOM, RIGHT, LEFT. The tooltip text can be HTML.

Default position defining style names are .customTooltipComponentTop, .customTooltipComponentBottom, .customTooltipComponentRight, .customTooltipComponentLeft, and these should be edited very carefully if at all. It would be better to add a style name or id to the tooltip.

To edit the color, font, etc. of a specific tooltip, use patterns:

.yourNewStyle > .customTooltipText {
    /* your rules here */
}
#idNewStyle > .customTooltipText {
    /* your rules here */
}

If you want to edit all tooltips' visual appearances, target class .customTooltipText suits your need just fine!

Sample code

TextField field1 = new TextField();
TooltipExtensionBuilder builder = new TooltipExtentionBuilder();
builder.setTooltipText("tooltip")
           .setPosition(TooltipPosition.TOP)
           .addTooltipStyleName("newStyle")
           .createTooltipWithId(field1, "newId");
TextField field2 = new TextField();
builder.createTooltip(field2, "other tooltip text");

Links

• Source Code
• Issue Tracker
• Author Home Page

Compatibility