Remove 'trigger' requirement

[bagelbyte]

Use case

I'd like to only open the popper programmatically, which I am currently achieving toggling the 'force-show' prop. However when I click on the component, I want to have some things happen in the contents of the reference slot before the click event fires.

Suggestion

Set the 'trigger' prop to accept a empty string '' value (or something along those lines)

props: {
     trigger: {
        type: String,
        default: 'hover',
        validator: value => ['click', 'hover', ''].indexOf(value) > -1
      },
      ...
}

[devWaleed]

@bagelbyte Can you share how you're using force-show to enable tooltip?

[bagelbyte]

sure! I use something that looks like this:

<template>
    <div>
        <popper ref="popper" :force-show="showPopper">
            <div class="popover">
                <h1>wazam</h1>
            </div>

            <div slot="reference">
                <h1>shazam</h1>
            </div>
        </popper>    
        <button @click="openPopper">openpopper</button>
    </div>
</template>
<script>
import Popper from 'vue-popperjs'

export default {
    created(){

    },
    components: {
        Popper
    },
    methods: {
        openPopper(){
	    this.showPopper = !this.showPopper
        }
    },
    data(){
        return {
            showPopper: false
        }
    }
}
</script>

But with the configurations as shown above, the popover still appears on hover. I CAN get around it by setting the 'delay-on-mouse-out' and 'delay-on-mouse-over' values to something very large, where hover/clicks effectively are useless and it just opens with the force-show being toggled, but I figure it was better just to bring it up

[generator85]

This would be very useful, can I add that it would be great if the document-click event would still be fired when no trigger is given.

[geongeorge]

I have edited your solution to get rid the trigger issue,

Add popper to a dummy div under (or above) the target element. If the div has zero height, it won't be clickable You can use 'force-show' prop to toggle it

<h1>shazam</h1>  
<popper ref="popper" :force-show="showPopper">
            <div class="popover">
                <h1>wazam</h1>
            </div>
          <div slot="reference">
                <div></div> <!-- Basically empty -->
            </div>
 </popper>    

<button @click="openPopper">openpopper</button>

[TurboControl]

Thanks bagelbyte and geongeorge. The reason why I need to use this type of programming method is because I have interactive components inside the popper and if they effectively make the HTML reactive, the popper gets dismissed. I tried to use click.prevent, but that didn't help. It would stop the popper from dismissing, but only if there was a non-reactive change.

I do have success with dynamic reactivity (loading spinner -> show data), but specifically when I insert rows into a table or toggle a row's visibility, the popper dismisses and without error. Using force-show works around this problem.

The side effect of all of this is that the user can no longer dismiss the popper by clicking outside of the popper. They now need to toggle or use a close button. Is there a way I can gain that feature back? Like emit an event clickOutside?

[vq0599]

if 'force-show ' was used , don't listener trigger events.

mounted() {
        this.referenceElm = this.reference || this.$slots.reference[0].elm;
        this.popper = this.$slots.default[0].elm;

        // add next line
        if (typeof this.forceShow === 'boolean') return
        

        switch (this.trigger) {
            // ...
        }
    },

It's solution ?

[karakum]

And what about simultaneously hover&click handlers for touch&desktop. On desktop 'hover' used, on mobile - 'click' used... Now I set 'hover' type and listen @click to toggle popper 'programmatically'