Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

Announcements
Announcing the newest addition to the Qlik Community, Qlik Gallery! Learn More
Highlighted
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.