feat: add tooltip for beaconscore

See: FE-164

Author: marcel-bitfly

frontend/components/dashboard/DashboardValidatorOverview.vue

@@ -139,11 +139,22 @@ const aprInfos = [
       :infos="efficiencyInfos"
       :title="$t('dashboard.validator.overview.24h_beaconscore')"
     >
-      {{
-        formatPercent(overview?.efficiency.last_24h ?? 0, {
-          maximumFractionDigits: 2,
-        })
-      }}
+      <BcTooltip
+        tooltip-class="tooltip"
+      >
+        {{
+          formatPercent(overview?.efficiency.last_24h ?? 0, {
+            maximumFractionDigits: 2,
+          })
+        }}
+        <template #tooltip>
+          <BcTranslation
+            keypath="dashboard.beaconscore.template"
+            linkpath="dashboard.beaconscore.link"
+            :to="externalLink.knowledgeBase.beaconScore"
+          />
+        </template>
+      </BcTooltip>
     </DashboardValidatorOverviewItem>
     <DashboardValidatorOverviewItem
       :title="$t('dashboard.validator.overview.30d_rewards')"

frontend/components/dashboard/table/DashboardTableSummary.vue

@@ -257,8 +257,26 @@ watch(
               field="efficiency"
               :sortable="true"
               body-class="efficiency-column"
-              :header="$t('dashboard.validator.col.beaconscore')"
             >
+              <template #header>
+                <div class="validators-header">
+                  <div>{{ $t("dashboard.validator.col.beaconscore") }}</div>
+                  <BcTooltip
+                    class="info"
+                    tooltip-class="summary-info-tooltip"
+                    @click.stop
+                  >
+                    <template #tooltip>
+                      <BcTranslation
+                        keypath="dashboard.beaconscore.template"
+                        linkpath="dashboard.beaconscore.link"
+                        :to="externalLink.knowledgeBase.beaconScore"
+                      />
+                    </template>
+                    <BcIcon name="circle-info" />
+                  </BcTooltip>
+                </div>
+              </template>
               <template #body="slotProps">
                 <DashboardTableSummaryValue
                   :class="slotProps.data.className"
@@ -376,7 +394,7 @@ watch(
     position: relative;
 
     .info {
-      top: 8px;
+      top: calc(50% - 9px);
       right: -50px;
     }
   }
@@ -407,6 +425,7 @@ watch(
   .status-column,
   .efficiency-column {
     padding: 7px !important;
+    min-width: 170px;
   }
 
   .validator-column {

frontend/i18n/locales/en.json

@@ -170,6 +170,10 @@
     },
     "dashboard": {
         "account_dashboard": "Account Dashboard",
+        "beaconscore": {
+            "link": "knowledge base article",
+            "template": "Read more about how we calculate the BeaconScore in our {link}"
+        },
         "creation": {
             "network": {
                 "subtitle": "What network are your validators on?"