Popper.js how to enable it on click

Question

I need to make a generic popover component for displaying things like filters and menus in an element over the page. For that I am using Popper.js

How to enable popover on users click? I did not see any "close" and "popup" methods in Popper.js object. Popover component should be triggered clicking on button or hover on a element.

to open Popover element I shoud use in parent component this

<ci-popover>
  <template
    slot-scope="popover"
    #action
  >
    <ci-button @click="popover.toggle()">
      Open Popover
    </ci-button>
  </template>
  <!-- Popover content -->
</ci-popover>

Popover component

<template>
  <div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-divider--padding-${padding}`]">
    <div ref="button">
    <slot name="action" :toggle="toggle" :close="close"></slot>
     </div>
    <div ref="tooltip">
      <h1>Hello popover</h1>
    </div>
    </div>
</template>

<script lang="ts">
  /*some imports*/
  import { createPopper, Instance } from '@popperjs/core';

  @Component
  export default class CiPopover extends Vue {
    /*Props*/

    created() {
      this.onOpen();
    }
    beforeDestroy() {
      this.onClose();
    }

    public close(): void {
      console.log('close method');
      
    }
    public toggle(): void {
      console.log('toggle method');//shoud "trigger" popover to show
    }

    @Emit('open')
    onOpen() {
      console.log("emit:open")
    }
    @Emit('close')
    onClose() {
      console.log("emit:close");
    }
    popperInstance = null as Instance | null
    mounted() {
      this.popperInstance = createPopper(this.$refs.button, this.$refs.tooltip, {
        placement: 'top',
      });
    } 
  }
</script>

<ci-popover variant="emphasis"
                padding="md"
                placement="top"
                @open="ciPopoverOnOpen"
                @close="ciPopoverOnClose">
      <template slot-scope="popover" slot="action">

        <ci-button @click="popover.toggle()">
          Open Popover
        </ci-button>
        <ci-button @click="popover.close()">
          Close popover
        </ci-button>
      </template>
      <!-- Popover content -->
      
    </ci-popover>

Answer 1

It looks like you are using popper.js and so my answer will be based on that library.

I did not see any "close" and "popup" methods in Popper.js object.

It does not have show/hide methods because it is only a positioning engine.

It does however have method for updating/destroying an instance.

Popover component should be triggered clicking on button or hover on a element.

You can just instead create an instance when you click/hover an element then.

<template>
  <div>
    <div ref="reference">
      Something
    </div>

    <button
      ref="button"
      @click="onButtonClick"
    >
      Trigger
    </button>
  </div>
</template>

<script>
import { createPopper } from "@popperjs/core";

export default {
  data() {
    return {
      popper: null,
    }
  },

  methods: {
    onButtonClick() {
      if (this.popper === null) {
        this.popper = createPopper(this.$refs.button, this.$refs.reference, { ...yourOptions })
      } else {
        this.popper.destroy()
        this.popper = null
      }
    }
  },

  beforeDestroy() {
    if (this.popper !== null) {
      this.popper.destroy()
    }
  }
}
</script>

You might get away with just using one instance of popper instead of creating/destroying always but that's for you to decide and to figure out.