Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Not applicable

PopOver not working in Widgets?

I am trying to use a popover within a widget in Qliksense.

Neither the example from UI Overview | Leonardo‌ nor the examples from http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/leonardo-ui/leonardoui-sense-...‌ are working for me.

The buttons appear but on clicking them nothing happens.

QlikSense Version is 3.2.

  • Are Popovers within widgets not working generally?
  • Or is there some special trick to get it working?

Thanks for your help!

5 Replies
Not applicable

Re: PopOver not working in Widgets?

Hi Sebastian,

Can you share the code of that widget?

Not applicable

Re: PopOver not working in Widgets?

It is exactly the same code as mentioned in the examples.

Example A:

<button class="lui-button  popover-trigger">Open popover (light)</button>

<div class="popover-content" style="display: none;">

  <div class="lui-popover" style="width: 400px;">

    <div class="lui-popover__header">

      <div class="lui-popover__title">Popover title</div>

    </div>

    <div class="lui-popover__body">

      Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.

    </div>

    <div class="lui-popover__footer">

      <button class="lui-button  lui-popover__button">Cancel</button>

      <button class="lui-button  lui-popover__button  close-button">OK</button>

    </div>

  </div>

</div>

Example B:

<div>

  <div>

  <button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate">Open popover (trigger)</button>

  </div>

  <div>

  <button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate" x-variant="inverse">Open popover (trigger, inverse)</button>

  </div>

  <div>

  <button class="lui-button" ng-click="$ctrl.openPopover($event)">Open popover (service)</button>

  </div>

  <div>

  <button class="lui-button" ng-click="$ctrl.openPopover($event, 'inverse')">Open popover (service, inverse)</button>

  </div>

  <div>

  <button class="lui-button" ng-click="$ctrl.openToPosition($event)">Open popover (service, position to coordinate)</button>

  </div>

  <div>

  <button class="lui-button" ng-click="$ctrl.openCustom($event)">Open popover (service, custom positioning)</button>

  </div>

</div>

elva_lester
New Contributor III

Re: PopOver not working in Widgets?

I'm not sure if you still need this, but I do have a popover extension working.  I hope it helps.

Not applicable

Re: PopOver not working in Widgets?

thanks for your help, I also have a working extension with PopOvers. However, my question was about PopOvers in Widgets.

elva_lester
New Contributor III

Re: PopOver not working in Widgets?

I actually got it working in Widgets first.  All you have to do is copy the contents of the popover-template.html into the HTML window of the Widget editor.  Then select an app and the popover should work.

Community Browser