Tooltipster in Webpack

[dave4jr]

Hello and thanks in advance for your time sir. I'm stuck, I can't for the life of me figure out how to get tooltipster to work with webpack. Basically I just keep getting tooltipster is not a function. I'm not having any issues with any other jquery plugins and I'm trying to figure out why it is not defined. Any webpack examples with tooltipster out there would be awesome. Thanks!!

[louisameline]

Hello, thank you for your message, I haven't tried myself yet tbh.
I'll take a look soon, but meanwhile maybe someone else has answer?

[beyondsanity]

Same problem here, did somebody found a solution?

[2xlink]

Did you require tooltipster and its CSS in the file where you reference it? Like this:

require("tooltipster");
require("tooltipster/dist/css/tooltipster.bundle.min.css");
// if you want custom themes
require("tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css");
require("tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css");

I believe the CSS needs to be loaded separately because of this bug with webpack.

[dave4jr]

@2xlink Appreciate you taking the time to try and help. That link you referenced is actually not a bug, it's that people aren't really understanding how webpack is working. The CSS doesn't need to be referenced separately if you configure your webpack config to handle it. For example, the styleloader is a webpack loader that takes any CSS and inserts in separate style tags, etc...

I believe the issue here is a result of the wrapping step that webpack performs to give each file its own private scope. I haven't looked too deeply into how the tooltipster node module is written, but there's something that is preventing the scope from including tooltipster.