Tooltips4Vaadin | Vaadin

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


This plugin allows you to define proper tooltips.

Tooltip example image did not load.


  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)


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:
  2. Project Lombok (license: MIT, version 1.18.22, URL:
  3. retry (license: MIT, version: 0.12.0, URL:

Copyright and license

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


Link to this version
ExperimentalReleased 06 May 2022Apache License 2.0
Framework Support
Vaadin platform 23
Browser Compatibility
Install with
Release notes - Version 3.0.2
  • fixed tooltip.js not being part of the released artifact