pref: add topic tooltip

src/views/Home/content/article/components/ArticleContent.vue

@@ -155,9 +155,13 @@ onBeforeUnmount(() => {
   padding: 0;
   flex-shrink: 0;
   border: 2px solid var(--kungalgame-red-4);
+
+  & > div {
+    margin: 0 !important;
+  }
 }
 
-.list-move, /* Applied to moving elements during the transition */
+.list-move,
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;

src/views/topic/components/footer/Footer.vue

@@ -104,10 +104,20 @@ Link: https://www.kungal.com/topic/${props.info.tid}`
           :rid="info.rid"
           :upvotes="info.upvotes"
           :to-uid="toUser.uid"
+          v-tooltip="{
+            message: { en: 'Upvote', zh: '推话题' },
+            position: 'bottom',
+          }"
         />
 
         <!-- Number of views (only shown for the topic owner) -->
-        <li v-if="info.views > 0">
+        <li
+          v-if="info.views > 0"
+          v-tooltip="{
+            message: { en: 'Views', zh: '浏览数' },
+            position: 'bottom',
+          }"
+        >
           <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
           {{ info.views }}
         </li>
@@ -119,6 +129,10 @@ Link: https://www.kungal.com/topic/${props.info.tid}`
           :rid="info.rid"
           :likes="info.likes"
           :to-uid="toUser.uid"
+          v-tooltip="{
+            message: { en: 'Likes', zh: '点赞数' },
+            position: 'bottom',
+          }"
         />
 
         <!-- Dislike -->
@@ -128,6 +142,10 @@ Link: https://www.kungal.com/topic/${props.info.tid}`
           :rid="info.rid"
           :dislikes="info.dislikes"
           :to-uid="toUser.uid"
+          v-tooltip="{
+            message: { en: 'Dislikes', zh: '点踩数' },
+            position: 'bottom',
+          }"
         />
       </ul>
     </div>
@@ -142,7 +160,14 @@ Link: https://www.kungal.com/topic/${props.info.tid}`
       />
 
       <!-- Share -->
-      <span @click="handleClickShare" class="icon">
+      <span
+        @click="handleClickShare"
+        class="icon"
+        v-tooltip="{
+          message: { en: 'Share', zh: '分享话题' },
+          position: 'bottom',
+        }"
+      >
         <Icon icon="majesticons:share-line" />
       </span>
 
@@ -159,6 +184,10 @@ Link: https://www.kungal.com/topic/${props.info.tid}`
         :tags="content.tags"
         :category="content.category"
         :to-uid="toUser.uid"
+        v-tooltip="{
+          message: { en: 'Rewrite Topic', zh: 'Rewrite 话题' },
+          position: 'bottom',
+        }"
       />
 
       <!-- Comment slot -->

src/views/topic/components/footer/Reply.vue

@@ -41,7 +41,6 @@ const handleClickReply = () => {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
   color: var(--kungalgame-blue-4);
   cursor: pointer;
   transition: all 0.2s;
@@ -56,6 +55,7 @@ const handleClickReply = () => {
     top: 0;
     left: 0;
     border: 2px solid transparent;
+    box-sizing: border-box;
   }
   &:hover {
     color: var(--kungalgame-pink-4);

src/views/topic/components/reply/Reply.vue

@@ -137,6 +137,10 @@ const handleClickComment = (
                   )
                 "
                 class="icon"
+                v-tooltip="{
+                  message: { en: 'Comment Topic', zh: '评论话题' },
+                  position: 'bottom',
+                }"
               >
                 <Icon icon="fa-regular:comment-dots" />
               </span>