Directory

← Back

Tooltips4Vaadin

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

Author

Rating

Popularity

400+

Tooltips4Vaadin

This plugin allows you to define proper tooltips.

Tooltip example image did not load.

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 (showshowTooltip, hidehideTooltip)

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)

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);

Compatibility

(Loading compatibility data...)

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

  • fixed #40 (faulty handling of initially hidden items)
Released
2022-01-03
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 23+ in 3.1.0
Vaadin 23 in 3.0.2
Browser
Firefox
Google Chrome
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online