Add tooltips to teacher select

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue

@@ -105,37 +105,50 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
         @input="teachersInput"
       >
         <template #prepend-inner>
-          <v-chip
-            v-for="teacher in teachersWithStatus.filter(
-              (t) => t.status === 'removed',
-            )"
-            outlined
-            color="error"
-            class="mb-1"
-            small
-          >
-            <v-icon left>mdi-account-off-outline</v-icon>
-            <div class="text-decoration-line-through">
-              {{ teacher.fullName }}
-            </div>
-          </v-chip>
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-chip
+                v-for="teacher in teachersWithStatus.filter(
+                  (t) => t.status === 'removed',
+                )"
+                outlined
+                color="error"
+                class="mb-1"
+                small
+                v-on="on"
+                v-bind="attrs"
+              >
+                <v-icon left>mdi-account-off-outline</v-icon>
+                <div class="text-decoration-line-through">
+                  {{ teacher.fullName }}
+                </div>
+              </v-chip>
+            </template>
+            <span>{{ $t("chronos.substitutions.overview.teacher.status.absent") }}</span>
+          </v-tooltip>
         </template>
         <template #selection="data">
-          <v-chip
-            v-bind="data.attrs"
-            :input-value="data.selected"
-            close
-            class="mb-1 mt-1"
-            small
-            :outlined="getTeacherStatus(data.item) === 'new'"
-            :color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
-            @click:close="removeTeacher(data.item)"
-          >
-            <v-icon left v-if="getTeacherStatus(data.item) === 'new'">
-              mdi-account-plus-outline
-            </v-icon>
-            {{ data.item.fullName }}
-          </v-chip>
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-chip
+                v-bind="{ ...data.attrs, ...attrs }"
+                :input-value="data.selected"
+                close
+                class="mb-1 mt-1"
+                small
+                :outlined="getTeacherStatus(data.item) === 'new'"
+                :color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
+                @click:close="removeTeacher(data.item)"
+                v-on="on"
+              >
+                <v-icon left v-if="getTeacherStatus(data.item) === 'new'">
+                  mdi-account-plus-outline
+                </v-icon>
+                {{ data.item.fullName }}
+              </v-chip>
+            </template>
+            <span>{{ getTeacherStatus(data.item) === "new" ? $t("chronos.substitutions.overview.teacher.status.new") : $t("chronos.substitutions.overview.teacher.status.regular") }}</span>
+          </v-tooltip>
         </template>
       </teacher-field>
 

aleksis/apps/chronos/frontend/messages/en.json

@@ -63,6 +63,13 @@
           "substituted": "Substituted",
           "cancelled": "Cancelled"
         },
+        "teacher": {
+          "status": {
+            "absent": "Absent",
+            "regular": "Regular",
+            "new": "Substitution teacher"
+          }
+        },
         "comment": "Comment"
       }
     }