How to use leonardoui.popover() in extension?

[devan9876]

I want to use code similar to the example that I found on the github page (https://qlik-oss.github.io/leonardo-ui/popover.html) but I get an error on leonardoui.popover() that it is undefined which I think means I need to reference the library.

I tried adding it to the define section of my code hoping that it would be a global object similar to ‘qlik’, but that did not work.

define( [ "qlik","leonardoui","jquery","./script","./properties","./helper","text!./style.css"
],
function ( qlik,leonardoui,$,script,props,utils,cssContent) {

So..do I have to download the entire leonardoui package from github and bundle it with every extension that I want to be able to use the leonardoui methods or is there a way to reference a global version of leonardoui that presumably runs within Qliksense by default?

Example From Documentation that I am trying to replicate: (https://qlik-oss.github.io/leonardo-ui/popover.html)

var popoverTriggers = document.querySelectorAll( ".example-box .popover-trigger" );
  popoverTriggers = [].slice.apply( popoverTriggers ); // convert to array
  popoverTriggers.forEach( function ( element, idx ) {
    element.addEventListener( "click", function() {
      var popover = leonardoui.popover( {
        content: element.nextElementSibling.innerHTML,
        closeOnEscape: true,
        dock: idx === 0 ? "bottom" : "right",
        alignTo: element
      } );
      // Popover was shown
      var closeButton = popover.element.querySelectorAll( ".close-button" )[0];
      closeButton.addEventListener( "click", function() {
        popover.close();
      } );
    } );
  } );