Tooltips4Vaadin - Vaadin Add-on Directory
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](https://vaadin.com/releases))
* 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
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.
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.