diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c19e690408..843b22f3be 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -40,7 +40,10 @@ const Popover = {
overlayCenters: Boolean,
// What selector (witin popover!) to use for determining center of popover
- overlayCentersSelector: String
+ overlayCentersSelector: String,
+
+ // Lets hover popover stay when clicking inside of it
+ stayOnClick: Boolean
},
inject: ['popoversZLayer'], // override popover z layer
data () {
@@ -50,6 +53,7 @@ const Popover = {
// with popovers refusing to be hidden when user wants to interact with something in below popover
lockReEntry: false,
hidden: true,
+ pinned: false,
styles: {},
oldSize: { width: 0, height: 0 },
scrollable: null,
@@ -196,9 +200,10 @@ const Popover = {
},
showPopover () {
if (this.disabled) return
+ this.pinned = false
const wasHidden = this.hidden
this.hidden = false
- if (this.trigger === 'click') {
+ if (this.trigger === 'click' || this.stayOnClick) {
document.addEventListener('click', this.onClickOutside)
}
this.scrollable.addEventListener('scroll', this.onScroll)
@@ -227,7 +232,7 @@ const Popover = {
}
},
onMouseleave (e) {
- if (this.trigger === 'hover') {
+ if (this.trigger === 'hover' && !this.pinned) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
}
},
@@ -240,7 +245,7 @@ const Popover = {
}
},
onMouseleaveContent (e) {
- if (this.trigger === 'hover') {
+ if (this.trigger === 'hover' && !this.pinned) {
this.graceTimeout = setTimeout(() => this.hidePopover(), 1)
}
},
@@ -259,6 +264,11 @@ const Popover = {
if (this.$el.contains(e.target)) return
this.hidePopover()
},
+ onClickContent (e) {
+ if (this.trigger === 'hover' && this.stayOnClick) {
+ this.pinned = true
+ }
+ },
onScroll (e) {
this.updateStyles()
},
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f854515c11..9b67f40028 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -21,12 +21,22 @@
:class="popoverClass || 'popover-default'"
@mouseenter="onMouseenterContent"
@mouseleave="onMouseleaveContent"
+ @click="onClickContent"
>