Tooltips4Vaadin

A Tippy.js based Tooltip-Plugin for Vaadin Flow (23+).

Tooltips4Vaadin

This plugin allows you to define proper tooltips.

EOL 2023-05

Since I no longer work with Vaadin (for two years by now) and I will not find the time to keep up with the changes in the framework, I will no longer work on the plugin.

Thank you for input and general kindness.

UPDATE 2023-08

If you want to implement changes or add features head over to https://gitlab.com/gsedlacz/tooltips4vaadin/. The code is not that complicated ;)

Requirements

1. Java 11
2. Vaadin Flow version: 23+
3. npm based build

Breaking Changes

1.X to 2.X

• replaced Tooltips#removeAllTooltips with Tooltips#closeAllTooltips
• build target changed from 1.8 to 11 requirement got removed in version 2.1.2

2.X to 3.X

• Vaadin Flow 23 based version
• build target (finally) changed from 1.8 to 11 (similar vaadin)
• changed HasTooltip methods (show → showTooltip, hide → hideTooltip)

Usage

Set / update a tooltip

Tooltips.getCurrent().setTooltip(yourComponent, "an important information")

Remove a tooltip

Tooltips.getCurrent().removeTooltip(yourComponent)

Mixin Interface for Components

class MyComp extends Component implements HasTooltip {
    MyComp(){
        this.setTooltip("useful hint");
        this.removeTooltip();
    }
}

Display Configuration

TooltipConfiguration ttconfig = new TooltipConfiguration("test text");
ttconfig.setDuration(null, 20);
ttconfig.setContent("test \n<br> abc");
ttconfig.setFollowCursor(TC_FOLLOW_CURSOR.HORIZONTAL);
ttconfig.setHideOnClick(TC_HIDE_ON_CLICK.FALSE);
ttconfig.setShowOnCreate(false);

Textfield tf = new TextField();
Tooltips.getCurrent().setTooltip(tf, tconf);

Using a default configuration

TooltipConfiguration defaultConf = new TooltipConfiguration();
defaultConf.setArrow(true);
defaultConf.setDelay(2000);

Tooltips.getCurrent().setDefaultTooltipConfiguration(defaultConf);

// both of the approaches below will make use of the default configuration, while directly setting a customized configuration will not
HasTooltip component = ...
component.setTooltip("message");
// OR
Tooltips.getCurrent().setTooltip(component, "message");

Browser Compatibilty

This library should work nicely with any modern browser but only the ones shown on the right side were tested.

Trouble Shooting

If you receive build errors like:

ERROR] Failed to execute goal com.vaadin:vaadin-maven-plugin:14.1.28:build-frontend (default) on project tooltipdemo: Execution default of goal com.vaadin:vaadin-maven-plugin:14.1.28:build-frontend failed:
[ERROR]
[ERROR]   Failed to find the following css files in the `node_modules` or `PATH\tooltipdemo\frontend` directory tree:
[ERROR]       - tippy.js/dist/tippy.css
[ERROR]   Check that they exist or are installed. If you use a custom directory for your resource files instead of the default `frontend` folder then make sure it's correctly configured (e.g. set 'vaadin.frontend.frontend.folder' property)

Try loading npm dependencies manually using: npm i in your project directory.

Credit

This plugin makes use of these libraries:

1. tippy.js (license: MIT, version. 6.3.1, URL: https://github.com/atomiks/tippyjs)
2. Project Lombok (license: MIT, version 1.18.22, URL: https://projectlombok.org/)
3. retry (license: MIT, version: 0.12.0, URL: https://www.npmjs.com/package/retry)

Copyright and license

Code and documentation copyright 2022 Gerrit Sedlaczek.
Code and documentation released under Apache 2.0 license.

Sample code

Button button = Button("example");
Tooltips.getCurrent().setTooltip(button, "tooltip");

class MyComp extends Component implements HasTooltip {
    MyComp(){
        this.setTooltip("useful hint");
        this.removeTooltip();
    }
}

TooltipConfiguration ttconfig = new TooltipConfiguration("test text");
ttconfig.setDuration(null, 20);
ttconfig.setContent("test \n<br> abc");
ttconfig.setFollowCursor(TC_FOLLOW_CURSOR.HORIZONTAL);
ttconfig.setHideOnClick(TC_HIDE_ON_CLICK.FALSE);
ttconfig.setShowOnCreate(false);

Textfield tf = new TextField();
Tooltips.getCurrent().setTooltip(tf, tconf);

Links

• Source Code
• Issue tracker

Compatibility