feat(ui): Add tooltips on favorability icons (#1054)

This PR adds tooltips on favorability icons.

skore-ui/src/components/CrossValidationReportResults.vue

@@ -2,6 +2,10 @@
 import Simplebar from "simplebar-vue";
 import { computed, ref, useTemplateRef } from "vue";
 
+import DropdownButton from "@/components/DropdownButton.vue";
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
+import MetricFavorability from "@/components/MetricFavorability.vue";
+import StaticRange from "@/components/StaticRange.vue";
 import type { PrimaryResultsDto, TabularResultDto } from "@/dto";
 import { isElementOverflowing } from "@/services/utils";
 
@@ -48,14 +52,7 @@ function isNameTooltipEnabled(index: number) {
         <FloatingTooltip placement="bottom" :enabled="isNameTooltipEnabled(i)">
           <div class="name">
             {{ result.name }}
-            <i
-              v-if="result.favorability === 'greater_is_better'"
-              class="icon icon-ascending-arrow"
-            />
-            <i
-              v-if="result.favorability === 'lower_is_better'"
-              class="icon icon-descending-arrow"
-            />
+            <MetricFavorability :favorability="result.favorability" />
           </div>
           <template #tooltipContent>
             <span class="name-tooltip">{{ result.name }}</span>
@@ -110,14 +107,7 @@ function isNameTooltipEnabled(index: number) {
                 <th>Fold</th>
                 <th v-for="(column, i) in currentTabularResult.columns" :key="i">
                   {{ column }}
-                  <i
-                    v-if="currentTabularResult.favorability[i] === 'greater_is_better'"
-                    class="icon icon-ascending-arrow"
-                  />
-                  <i
-                    v-if="currentTabularResult.favorability[i] === 'lower_is_better'"
-                    class="icon icon-descending-arrow"
-                  />
+                  <MetricFavorability :favorability="currentTabularResult.favorability[i]" />
                 </th>
               </tr>
             </thead>
@@ -249,12 +239,6 @@ function isNameTooltipEnabled(index: number) {
           color: var(--color-text-primary);
           font-weight: var(--font-weight-medium);
 
-          /* stylelint-disable-next-line no-descending-specificity */
-          & .icon {
-            color: var(--color-icon-tertiary);
-            vertical-align: middle;
-          }
-
           &:first-child {
             position: sticky;
             left: 0;

skore-ui/src/components/MetricFavorability.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { Favorability } from "@/dto";
+import { computed } from "vue";
+
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
+
+const props = defineProps<{ favorability: Favorability }>();
+
+const icon = computed(() => {
+  switch (props.favorability) {
+    case "greater_is_better":
+      return "icon-ascending-arrow";
+    case "lower_is_better":
+      return "icon-descending-arrow";
+    default:
+      return "";
+  }
+});
+
+const text = computed(() => {
+  switch (props.favorability) {
+    case "greater_is_better":
+      return "Higher is better";
+    case "lower_is_better":
+      return "Lower is better";
+    default:
+      return "";
+  }
+});
+</script>
+
+<template>
+  <FloatingTooltip v-if="icon !== ''" placement="bottom" :text="text">
+    <i class="icon" :class="icon" />
+  </FloatingTooltip>
+</template>
+
+<style scoped>
+.icon {
+  color: var(--color-icon-tertiary);
+  vertical-align: middle;
+}
+</style>