From a56101197ab6907dbfa55b2ed7cc89aa93d1f89c Mon Sep 17 00:00:00 2001
From: "Cameron (3539)" <theforgelover@gmail.com>
Date: Wed, 1 Jan 2025 14:18:25 -0500
Subject: [PATCH] Add tooltip to calibration data table (#1670)

Help make it clearer for people to click on the table.

![image](https://github.com/user-attachments/assets/4d8fb2a1-a3c8-4391-8021-a0d9356aaeea)
---
 .../cameras/CameraCalibrationCard.vue         | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index db2bb10ba..47271283f 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -228,22 +228,27 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
                 <th>Horizontal FOV</th>
                 <th>Vertical FOV</th>
                 <th>Diagonal FOV</th>
+                <th>More Info</th>
               </tr>
             </thead>
-            <tbody>
-              <tr
-                v-for="(value, index) in getUniqueVideoFormatsByResolution()"
-                :key="index"
-                title="Click to get calibration specific information"
-                @click="setSelectedVideoFormat(value)"
-              >
+            <tbody style="cursor: pointer">
+              <tr v-for="(value, index) in getUniqueVideoFormatsByResolution()" :key="index">
                 <td>{{ getResolutionString(value.resolution) }}</td>
+
                 <td>
                   {{ value.mean !== undefined ? (isNaN(value.mean) ? "Unknown" : value.mean.toFixed(2) + "px") : "-" }}
                 </td>
                 <td>{{ value.horizontalFOV !== undefined ? value.horizontalFOV.toFixed(2) + "°" : "-" }}</td>
                 <td>{{ value.verticalFOV !== undefined ? value.verticalFOV.toFixed(2) + "°" : "-" }}</td>
                 <td>{{ value.diagonalFOV !== undefined ? value.diagonalFOV.toFixed(2) + "°" : "-" }}</td>
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on, attrs }">
+                    <td v-bind="attrs" v-on="on" @click="setSelectedVideoFormat(value)">
+                      <v-icon small class="mr-2">mdi-information</v-icon>
+                    </td>
+                  </template>
+                  <span>Click for more info on this calibration.</span>
+                </v-tooltip>
               </tr>
             </tbody>
           </v-simple-table>