How should I integrate an external JavaScript library (module), e.g. Popper

Flow
1

I am using Vaadin 14.0.12. I can’t get an external JavaScript library working. How should integrate I an external JavaScript library (module), e.g. Popper.js / Tooltip.js?

I always get the following message: “[ReferenceError]
: Tooltip is not defined”

Package and module import in the layout component:

@NpmPackage(value = "popper.js", version = "1.14.3")
@NpmPackage(value = "tooltip.js", version = "1.3.3")
@JsModule("popper.js/dist/popper.js")
@JsModule("tooltip.js/dist/tooltip.js")
public class MainLayout extends AppLayout {
    ...
}

Usage within another component:

public class DefaultIcon extends Component {
   ...
   this.getElement().executeJs("new Tooltip(document.querySelector('#...'), { placement: 'top', title: '...' });");
   ...
}
2

Hello,

There is an example here ( for three.js but you can use the same way for tooltip/popper):
https://vaadin.com/forum/thread/17942059/17942343

You can also choose to add the library globally. here an example of a different tooltip library:

https://vaadin.com/forum/thread/17935087/using-js-files-from-node_modules-directory

if you have any questions, don’t hesitate.

3

Thanks. Could you maybe add an example for this case. For me the references in with jquery are not clear because the name of the package matches the name of the common variable.

I get a “ReferenceError: webpack is not defined” when using this:

module.exports = merge(flowDefaults, {
	plugins: [
	          new webpack.ProvidePlugin(
	        	{
	                $ : "tooltip.js",
	                Tooltip : "tooltip.js",
	                "window.Tooltip": "Tooltip"
	            })
	         ]
});
4

Added webpack import but now still get a “Tooltip is not definded”. In which class should I add the annotation? Is it okay on the layout (see above)?

const webpack = require('webpack');
const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');

module.exports = merge(flowDefaults, {
	plugins: [
	          new webpack.ProvidePlugin(
	        	{
	                $ : "tooltip.js",
	                Tooltip : "tooltip.js",
	                "window.Tooltip": "tooltip.js"
	            })
	         ]
});
5

I think you don’t need to do this for tooltip.

The problem with @JsModule(“tooltip.js/dist/tooltip.js”) is that you don’t have the Tooltip defined.
Then you have 2 choices (or more):

The second solution could be:
Replace @JsModule(“tooltip.js/dist/tooltip.js”) to @JavaScript(“./tooltip-loader.js”)
Create tooltip-loader.js in frontend folder that contains: window.Tooltip = require(“tooltip.js/dist/tooltip.js”);

If I’ve got some time, I’ll try to make a working example.

6

I’m sorry, but tooltip.js imports internally popper.js (I am not using tooltip-js!). How will this be resolved?

You really need to do an example.

7

Hi,

Yes the example I linked was for another tooltip library.

Here a working example of tooltip-js.
You can choose to use it “locally” (you won’t have Tooltip class available in all your js files). Here the Java package: https://github.com/jcgueriaud1/vaadin-tooltip-js/tree/master/src/main/java/org/vaadin/jeanchristophe/local

You can also use it from CDN (no webpack): https://github.com/jcgueriaud1/vaadin-tooltip-js/blob/master/src/main/java/org/vaadin/jeanchristophe/external/ExternalResourceView.java

Or add tooltip js class available in all your js files:
https://github.com/jcgueriaud1/vaadin-tooltip-js/blob/master/src/main/java/org/vaadin/jeanchristophe/global/WindowResourceView.java

I recommend the local way, the demo code is probably cleaner :p.

If you have questions feel free to ask.

8

Thanks, working! However, there is some problem with the tooltip div covered by another element. In my case I have a grid and tooltips of the first row are not shown fully because the exceed the border of the grid. Should be a z-index somewhere, but not sure where?!

9

Fixed the tooltip level by:

@CssImport(value = "./style/grid.css", themeFor = "vaadin-grid")
public class MainLayout extends AppLayout {
 ...
}

./style/grid.css:

#table tbody {
	z-index: 99;
}

./style/tooltip.css

.popper,
.tooltip {
    ...
    z-index: 999;
}
10

Great. I think you may have some problems in a dialog. But it can probably be fixed with css.