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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Added z-index to prevent tooltip from appearing under neighbouring components
- Released
- 2019-02-26
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.7+
- Vaadin 8.0+
- Browser
- Browser Independent
TooltipExtension Add-on - Vaadin Add-on Directory
Extension for creating custom and customizable tooltips for any Vaadin 7 or 8 Component!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!