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: '...' });");
...
}
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:
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.
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?!