How to load a jQuery Plugin into a Qlik Sense Extension

[fduchmann]

Hello Qlik-Community,

I try to load a jQuery Plugin into my Qlik Sense (3.0) Extension without any luck.

The Plugin is called Tipsy, its a simple javascript Tooltip Library which works fine with SVG Elements.

GitHub - jaz303/tipsy: Facebook-style tooltips plugin for jQuery

tipsy

The jQuery Plugin is as far as I know not an AMD / RequireJS Module  so I have to Shim it with requireJS.

The beginning of my Extension Script looks like this:

requirejs.config({
    paths:{
        "tipsy": "js/tipsy"
    },
    shim: {
        "tipsy": {
            deps: ["jquery"],
            exports: "tipsy"
        }
    }
});

define(["./properties",
        "jquery",
        "qlik",
        "./js/d3.v3.min",
        "./js/dagre-d3",
        "tipsy",
        "css!./css/custom.css",
        "css!./css/tipsy.css",
        /* dependencies go here seperated by ,  */],
    function(props, jquery, qlik, d3, dagreD3, tipsy/* returned dependencies as arguments */ ) {
        ......
        paint: function($element, layout){

               // Here I want to use the jQuery Plugin Tipsy

          }

I always get an Error that tipsy is not found.

How can I load an jQuery Plugin correctly into my Qlik Sense Extension?

Hope someone can help me.

Best regards

Frank

[ErikWetterberg · Accepted solution]

Hi Frank,

Requirejs can be a bit complicated.. You could try with the full path in the shim, so something like this:

shim:{
  "extensions/your-extension/tipsy":{
     deps: ["jquery"],
     exports: "" //I don't know if this is needed and if it should be the whole path
  }
}

and refer to it relative to your main extension file:

define(....."./tipsy"

Please forgive me if this does not work, I haven't actually tested this, but I've done like this in some extension. And do let us know if it does work.

Erik

[fduchmann]

Hello Erik,

thank you very much for your answer. RequireJS is realy complicated if you want to add a non conform library 😞

But your hint was correct. My Script looks now like this and is working 🙂

requirejs.config({
    "shim": {
        "extensions/ProcessExplorerD3/js/tipsy": {
            "deps": ["jquery"],
            "exports": ""
        }
    }
});

define(["./properties",
        "jquery",
        "qlik",
        "./js/tipsy",
.......

function(props, jquery, qlik   /* returned dependencies as arguments */ ) { ........

Note that no argument for the function is needed, because the library is a jquery plugin so you can use it like this:

jquery().tipsy();

Thank you very much.

Frank