add stay-on-click prop to solve case of clicking user avatar in status popover

1 files changed, 21 insertions, 0 deletions

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f854515c..9b67f400 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"
         >
           <slot
             name="content"
             class="popover-inner"
             :close="hidePopover"
           />
+          <div
+            v-if="stayOnClick && pinned"
+            class="pinned-tooltip-icon popover popover-default"
+          >
+            <FAIcon
+              icon="thumbtack"
+              class="faint"
+            />
+          </div>
         </div>
       </transition>
     </teleport>
@@ -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: '';