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


This plugin allows you to define proper tooltips.

Tooltip example image did not load.


  1. Java 1.8
  2. Vaadin Flow version: 14+
  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


Set / update a tooltip

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

Remove a tooltip


Mixin Interface for Components

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

Display Configuration

TooltipConfiguration ttconfig = new TooltipConfiguration("test text");
ttconfig.setDuration(null, 20);
ttconfig.setContent("test \n<br> abc");

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

Using a default configuration

TooltipConfiguration defaultConf = new TooltipConfiguration();


// both of the approaches below will make use of the default configuration, while directly setting a customized configuration will not
HasTooltip component = ...
// 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]   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.


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.


Link to this version
StableReleased 03 January 2022Apache License 2.0
Framework Support
Vaadin platform 14+
Browser Compatibility
Install with
Release notes - Version 2.3.0
  • fixed #40 (faulty handling of initially hidden items)