Comments (7)
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
from vue-popper.
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>
from vue-popper.
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 ?
from vue-popper.
@bagelbyte Can you share how you're using force-show to enable tooltip?
from vue-popper.
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.
from vue-popper.
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
?
from vue-popper.
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'
from vue-popper.
Related Issues (20)
- Content showing when page loading HOT 1
- Prevent popper closing when document is clicked HOT 2
- Disabling 'hide' when specific element clicked HOT 1
- blank changelog
- How to hover poper show delay wait axios success ? HOT 2
- Popper v2 HOT 5
- Error on console, but running well
- Position transition
- 2 VNodes in this.$slots.default array in NuxtJS
- Can vue-popper support vue3.0 HOT 12
- How to call event hide? HOT 2
- Lazy load images HOT 1
- Make popover remain visible when clicking inside HOT 1
- Provide example on how to use custom trigger link/element HOT 1
- BUG: Multiple documentclick events triggered by popper HOT 1
- vertical offset is not working when placement is right HOT 1
- arrow border
- is this package maintained?
- Update: popper.js from v1 to v2 HOT 2
- gpuAcceleration does not work HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-popper.