From 25223d026b8cd6c2c55bf8acec0acc131a61c77a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 12 Jan 2023 13:39:39 +0800
Subject: [PATCH] feat: add tooltip for user picker (#938)

---
 components/user/UserPicker.vue | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/user/UserPicker.vue b/components/user/UserPicker.vue
index 3df2c507..4b1a2431 100644
--- a/components/user/UserPicker.vue
+++ b/components/user/UserPicker.vue
@@ -17,16 +17,27 @@ const switchUser = (user: UserLogin) => {
   <div flex justify-start items-end px-2 gap-5>
     <div flex="~ wrap-reverse" gap-5>
       <template v-for="user of all" :key="user.id">
-        <button
-          flex rounded
-          cursor-pointer
-          aria-label="Switch user"
-          :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
-          hover="filter-none op100"
-          @click="switchUser(user)"
-        >
-          <AccountAvatar w-13 h-13 :account="user.account" square />
-        </button>
+        <CommonTooltip :distance="8" :delay="{ show: 300, hide: 100 }">
+          <button
+            flex rounded
+            cursor-pointer
+            aria-label="Switch user"
+            :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
+            hover="filter-none op100"
+            @click="switchUser(user)"
+          >
+            <AccountAvatar w-13 h-13 :account="user.account" square />
+          </button>
+
+          <template #popper>
+            <div text-center>
+              <span text-4>
+                <AccountDisplayName :account="user.account" />
+              </span>
+              <AccountHandle :account="user.account" />
+            </div>
+          </template>
+        </CommonTooltip>
       </template>
     </div>
     <div flex items-center justify-center w-13 h-13>