TooltipExtension Add-on | Vaadin

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!


Link to this version
ExperimentalReleased 26 February 2019Apache License 2.0
Framework Support
Vaadin 7.7+
Vaadin 8.0+
Browser Independent
Install with
Release notes - Version 1.1

Added z-index to prevent tooltip from appearing under neighbouring components