Commit 97dbdb9

HPCesia <me@hpcesia.com>
2025-02-10 04:32:32
fix: tooltip overflow
1 parent 2210d60
Changed files (3)
src
pages
src/pages/archives/categories/index.astro
@@ -27,16 +27,23 @@ if (uncategorizedPosts.length > 0)
   <div
     class="card card-border border-base-300 mx-auto flex flex-col items-center border-2 px-6 py-4"
   >
-    <div class="tooltip tooltip-right mx-auto w-fit">
+    <div class="tooltip md:tooltip-right tooltip-bottom mx-auto w-fit">
       <h1 class="text-center text-3xl font-bold">{i18n(I18nKey.categories)}</h1>
-      <div class="tooltip-content">
-        {
-          [
-            `${allPosts.length} ${i18n(allPosts.length > 1 ? I18nKey.postsCount : I18nKey.postCount)}`,
-            ', ',
-            `${categories.length} ${i18n(categories.length > 1 ? I18nKey.categoriesCount : I18nKey.categoryCount)}`,
-          ]
-        }
+      <div class="tooltip-content flex flex-col">
+        <div>
+          {
+            `${allPosts.length} ${i18n(
+              allPosts.length > 1 ? I18nKey.postsCount : I18nKey.postCount
+            )}, `
+          }
+        </div>
+        <div>
+          {
+            `${categories.length} ${i18n(
+              categories.length > 1 ? I18nKey.categoriesCount : I18nKey.categoryCount
+            )}`
+          }
+        </div>
       </div>
     </div>
     <ul
src/pages/archives/tags/index.astro
@@ -28,16 +28,20 @@ if (untaggedPosts.length > 0) tagPosts.set(i18n(I18nKey.untagged) as string, unt
   <div
     class="card card-border border-base-300 mx-auto flex flex-col items-center border-2 px-6 py-4"
   >
-    <div class="tooltip tooltip-right mx-auto w-fit">
-      <h1 class="text-center text-3xl font-bold">{i18n(I18nKey.tags)}</h1>
-      <div class="tooltip-content">
-        {
-          [
-            `${allPosts.length} ${i18n(allPosts.length > 1 ? I18nKey.postsCount : I18nKey.postCount)}`,
-            ', ',
-            `${tags.length} ${i18n(tags.length > 1 ? I18nKey.tagsCount : I18nKey.tagCount)}`,
-          ]
-        }
+    <div class="tooltip md:tooltip-right tooltip-bottom mx-auto w-fit">
+      <h1 class="text-center text-3xl font-bold">{i18n(I18nKey.tags)}</h1><div
+        class="tooltip-content flex flex-col"
+      >
+        <div>
+          {
+            `${allPosts.length} ${i18n(
+              allPosts.length > 1 ? I18nKey.postsCount : I18nKey.postCount
+            )}, `
+          }
+        </div>
+        <div>
+          {`${tags.length} ${i18n(tags.length > 1 ? I18nKey.tagsCount : I18nKey.tagCount)}`}
+        </div>
       </div>
     </div>
     <ul
src/pages/archives/[...time].astro
@@ -101,7 +101,7 @@ const postCount = await getPostsCount();
     </div>
   </div>
   <div class="card card-bordered border-base-300 border-2 px-6 py-4">
-    <div class="tooltip tooltip-right mx-auto w-fit">
+    <div class="tooltip md:tooltip-right tooltip-bottom mx-auto w-fit">
       <h1 class="text-center text-3xl font-bold">{i18n(I18nKey.archive)}</h1>
       <div class="tooltip-content">
         {`${postCount} ${i18n(postCount > 1 ? I18nKey.postsCount : I18nKey.postCount)}`}