Popper-core: Show/hide toggle popper. Need help.

[codev0]

Hi.
I try to create tooltip. But I dont understand how to add show/hide toggle functionality by click event.
http://codepen.io/codev0/pen/XKbeXR

<div class="elem" data-popper="false">  
  ...
</div>

content = ['string1', 'string2', 'string3'];

$('.elem').on('click', function(e) {

  if (!$(e.target).data('popper')) {
    $(e.target).data('popper', true);
    var thePopper = new Popper(e.target, {
      classNames: ['popper'],
      content: content,
      parent: toolTip,
      contentType: 'html',
      placement: 'bottom-start',
      reference: e.target
    });
  } else {
    $(e.target).data('popper', false);
    thePopper.destroy();
  }
});

[FezVrasta]

This question would better fit on stack overflow. This place is for bug reports.

[Skinner927]

@FezVrasta There is no information about this on stackoverflow. In fact, there are no questions about popper.js on stackoverflow: http://stackoverflow.com/search?q=popper.js And a Google search brings me back here.

Let me perhaps ask a more direct question for myself who is wondering of the proper usage, and anyone who finds their way here.

The docs do not list a way to show and hide the instantiated popper. Should we destroy and re-create or instead go with hiding the popover via CSS?

[FezVrasta]

As I said, this kind of questions should be asked on StackOverflow, this place is for bug reports and development of the library.

Popper.js is a positioning library, it doesn't handle the open/close behavior, you have to implement it by yourself (for now).

You may want to follow #61

[strogonoff]

Naming is the underlying issue here—“popper” arguably implies the ability to _pop_ elements _up_, thus drawing the wrong type of developer.

[FezVrasta]

Near.js was my first choice but Firefox already took it 😥

[leevigraham]

Came here looking for showing hiding poppers as well.

[FezVrasta]

Take a look at the Tooltip.js library provided by Popper.js in the same repository, or look at Tippy.js, which is a more advanced version of it still based on Popper.js.

[leevigraham]

@Skinner927 It looks like tipsy.js is just hiding the popper (visibility) instance instead of destroying it:

https://github.com/atomiks/tippyjs/blob/master/src/js/tippy.js#L761

and tooltip.js is setting display none:

https://github.com/FezVrasta/popper.js/blob/master/src/tooltip/index.js#L165-L171

[FezVrasta]

It's also disabling the event listeners (which is the suggested way to handle hidden poppers):
https://github.com/atomiks/tippyjs/blob/master/src/js/tippy.js#L811

[leevigraham]

@FezVrasta Do hidden Poppers recalculate their position during scroll / resize?

[FezVrasta]

Nope, their event listeners get removed.