1 files changed, 76 insertions, 57 deletions
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 022f04c7..686ad27f 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -9,66 +9,85 @@
       class="original"
       target="_blank"
       v-html="content"
-    /><!-- eslint-enable vue/no-v-html --><span
-      v-if="user"
-      class="new"
-      :style="style"
-      :class="classnames"
+    /><!-- eslint-enable vue/no-v-html -->
+    <Popover
+      trigger="click"
+      :bound-to="{ x: 'container'}"
+      bound-to-selector=".column"
+      popover-class="popover-default mention-popover"
+      :disabled="!shouldShowTooltip"
     >
-      <a
-        class="short button-unstyled"
-        :class="{ '-with-tooltip': shouldShowTooltip }"
-        :href="url"
-        @click.prevent="onClick"
-      >
-        <!-- eslint-disable vue/no-v-html -->
-        <UserAvatar
-          v-if="shouldShowAvatar"
-          class="mention-avatar"
-          :user="user"
-        /><span
-          class="shortName"
-        ><FAIcon
-          v-if="useAtIcon"
-          size="sm"
-          icon="at"
-          class="at"
-        />{{ !useAtIcon ? '@' : '' }}<span
-          class="userName"
-          v-html="userName"
-        /><span
-          v-if="shouldShowFullUserName"
-          class="serverName"
-          :class="{ '-faded': shouldFadeDomain }"
-          v-html="'@' + serverName"
-        />
-        </span>
-        <span
-          v-if="isYou && shouldShowYous"
-          :class="{ '-you': shouldBoldenYou }"
-        > {{ ' ' + $t('status.you') }}</span>
-        <!-- eslint-enable vue/no-v-html -->
-      </a><span
-        v-if="shouldShowTooltip"
-        class="full popover-default"
-        :class="[highlightType]"
-      >
+      <template v-slot:trigger>
         <span
-          class="userNameFull"
+          v-if="user"
+          class="new"
+          :style="style"
+          :class="classnames"
         >
-          <!-- eslint-disable vue/no-v-html -->
-          @<span
-            class="userName"
-            v-html="userName"
-          /><span
-            class="serverName"
-            :class="{ '-faded': shouldFadeDomain }"
-            v-html="'@' + serverName"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-        </span>
-      </span>
-    </span>
+          <a
+            class="short button-unstyled"
+            :class="{ '-with-tooltip': shouldShowTooltip }"
+            :href="url"
+            @click.prevent="onClick"
+          >
+            <!-- eslint-disable vue/no-v-html -->
+            <UserAvatar
+              v-if="shouldShowAvatar"
+              class="mention-avatar"
+              :user="user"
+            /><span
+              class="shortName"
+            ><FAIcon
+              v-if="useAtIcon"
+              size="sm"
+              icon="at"
+              class="at"
+            />{{ !useAtIcon ? '@' : '' }}<span
+              class="userName"
+              v-html="userName"
+            /><span
+              v-if="shouldShowFullUserName"
+              class="serverName"
+              :class="{ '-faded': shouldFadeDomain }"
+              v-html="'@' + serverName"
+            />
+            </span>
+            <span
+              v-if="isYou && shouldShowYous"
+              :class="{ '-you': shouldBoldenYou }"
+            > {{ ' ' + $t('status.you') }}</span>
+            <!-- eslint-enable vue/no-v-html -->
+          </a><span
+            v-if="shouldShowTooltip"
+            class="full"
+          >
+            <span
+              class="userNameFull"
+            >
+              <!-- eslint-disable vue/no-v-html -->
+              @<span
+                class="userName"
+                v-html="userName"
+              /><span
+                class="serverName"
+                :class="{ '-faded': shouldFadeDomain }"
+                v-html="'@' + serverName"
+              />
+              <!-- eslint-enable vue/no-v-html -->
+            </span>
+          </span>
+        </span></template>
+      <template v-slot:content>
+        <UserCard
+          class="mention-link-popover"
+          :user-id="user.id"
+          :hide-bio="true"
+          :bordered="false"
+          :allow-zooming-avatar="true"
+          :rounded="true"
+        />
+      </template>
+    </Popover>
   </span>
 </template>