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" > +
+ +
@@ -51,6 +61,17 @@ box-shadow: var(--popupShadow); } +.pinned-tooltip-icon { + position: absolute; + top: -1em; + left: -1em; + width: 2em; + height: 2em; + display: flex; + justify-content: center; + align-items: center; +} + .popover-default { &:after { content: ''; diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue index 2c436d04cb..9cabb751de 100644 --- a/src/components/status_popover/status_popover.vue +++ b/src/components/status_popover/status_popover.vue @@ -1,6 +1,7 @@