feat(CoinSection): add tooltip content

witnet · Jul 29, 2024 · 18c59d6 · 18c59d6
1 parent 93fbe79
commit 18c59d6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/components/cards/TooltipBase.vue b/components/cards/TooltipBase.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="group inline relative">
-    <slot></slot>
-    <span
+  <div class="group inline relative p-[4px] -p-[4px]">
+    <slot name="main"></slot>
+    <div
       :class="`${bgColor} ${textColor}`"
-      class="py-sm px-sm rounded-lg group-hover:opacity-100 transition-opacity text-sm rounded-md absolute bottom-full -translate-x-1/2 mb-sm opacity-0"
-      >{{ tooltipText }}</span
+      class="hidden min-w-[240px] py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-[16px] translate-x-[-90%] mb-sm"
     >
+      <slot name="tooltip"></slot>
+    </div>
   </div>
 </template>
 

diff --git a/components/sections/CoinSection.vue b/components/sections/CoinSection.vue
@@ -52,15 +52,25 @@
         </client-only>
         <p class="text text-wit-blue-500 mt-md">
           {{ release.platform }} • x86_64 • {{ size }} MB
-          <span class="text-xs ml-xs">ⓘ</span>
-          <!-- In case the info icon is works as a tooltip, set content and uncomment the component -->
-          <!-- <TooltipBase
+          <TooltipBase
             bg-color="bg-white-50"
             text-color="text-black-950"
-            tooltip-text="Lorenipsum dsesrwersedre"
+            :tooltip-text="t('coin.learn_more')"
           >
-          <span class="text-xs ml-xs">ⓘ</span>
-        </TooltipBase> -->
+            <template #tooltip>
+              <i18n-t keypath="coin.learn_more" tag="span" scope="global">
+                <a
+                  href="https://docs.witnet.io/node-operators/requirements"
+                  target="_blanc"
+                  class="underline"
+                  >{{ t('coin.learn-more-link') }}</a
+                >
+              </i18n-t>
+            </template>
+            <template #main>
+              <span class="text-xs ml-xs">ⓘ</span>
+            </template>
+          </TooltipBase>
         </p>
 
         <p

diff --git a/locales/en-US.json b/locales/en-US.json
@@ -15,6 +15,7 @@
   "hero": {
     "title": {
       "main": "The most {0} {1} {2}",
+      "main2-init": "reliable oracle,",
       "main2": "powerful oracle,",
       "gradient": "provably."
     },
@@ -35,6 +36,8 @@
       "main": "Stake{0}",
       "mark": "!"
     },
+    "learn-more-link": "Learn more",
+    "learn_more": "{0} about running a Witnet Node, including system requirements and setup instructions",
     "description1": "Secure the Network,{0}{1}",
     "description1-1": "Earn Rewards!",
     "description2": "Secure the network, earn rewards, and be part of a censorship-resistant oracle.",