From 797048c8dbec08d4d1b16ba8d77d1ca76b4c4ff4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 30 Jun 2024 04:57:58 +0800
Subject: [PATCH] fix: correct the truncation of  `save to watch later` tooltip
 (#870) close #870

---
 src/components/Tooltip.vue             | 28 ++++++++++++++++++++------
 src/components/VideoCard/VideoCard.vue |  4 ++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 28059d64..09e12d0b 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -1,14 +1,24 @@
 <script lang="ts" setup>
 defineProps<{
   content: string
-  placement: 'left' | 'right' | 'top' | 'bottom'
+  placement: 'left' | 'right' | 'top' | 'bottom' | 'bottom-left' | 'bottom-right'
   type?: 'default' | 'dark' | 'white'
 }>()
+
+const tooltipPos = ref({ left: 0, top: 0 })
+const tooltipRef = ref(null)
 </script>
 
 <template>
-  <span class="b-tooltip-wrapper">
+  <span
+    class="b-tooltip-wrapper"
+    :style="{
+      top: `${tooltipPos.top}px`,
+      left: `${tooltipPos.left}px`,
+    }"
+  >
     <div
+      ref="tooltipRef"
       class="b-tooltip"
       :class="[`b-tooltip--placement-${placement ?? 'top'}`, `b-tooltip--type-${type ?? 'default'}`]"
     >
@@ -34,13 +44,19 @@ defineProps<{
     }
 
     &--placement-top {
-      --uno: "top--2.5em left-1/2";
-      transform: translateX(-50%);
+      --uno: "top--2.5em left-1/2 translate-x--1/2";
     }
 
     &--placement-bottom {
-      --uno: "bottom--2.5em left-1/2";
-      transform: translateX(-50%);
+      --uno: "bottom--2.5em left-1/2 translate-x--1/2";
+    }
+
+    &--placement-bottom-left {
+      --uno: "bottom--2.5em left--2";
+    }
+
+    &--placement-bottom-right {
+      --uno: "bottom--2.5em right--2";
     }
 
     &--type-default {
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 9dbaaa1b..f13de249 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -357,10 +357,10 @@ function handleUndo() {
                 duration-300
                 @click.prevent="toggleWatchLater"
               >
-                <Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
+                <Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom-right" type="dark">
                   <div i-mingcute:carplay-line />
                 </Tooltip>
-                <Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
+                <Tooltip v-else :content="$t('common.added')" placement="bottom-right" type="dark">
                   <Icon icon="line-md:confirm" />
                 </Tooltip>
               </button>