From 90489b940f605ce80f571da09cf1e51438984c51 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 9 Apr 2025 16:43:25 +1000
Subject: [PATCH] Adding Tippy in TimeSince component

---
 src/Frontend/src/components/TimeSince.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/TimeSince.vue b/src/Frontend/src/components/TimeSince.vue
index 85583ddd4..c3faf2a37 100644
--- a/src/Frontend/src/components/TimeSince.vue
+++ b/src/Frontend/src/components/TimeSince.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
+import { Tippy } from "vue-tippy";
 
 const emptyDate = "0001-01-01T00:00:00";
 
@@ -8,17 +9,17 @@ const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?
 
 let interval: number | undefined = undefined;
 
-const title = ref(),
+const title = ref<string[]>([]),
   text = ref();
 
 function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
+    title.value = props.titleValue ? [props.titleValue] : [`${m.local().format("LLLL")} (local)`, `${m.utc().format("LLLL")} (UTC)`];
   } else {
     text.value = props.defaultTextOnFailure;
-    title.value = props.titleValue ?? props.defaultTextOnFailure;
+    title.value = [props.titleValue ?? props.defaultTextOnFailure];
   }
 }
 
@@ -34,5 +35,10 @@ onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>
-  <span :title="title">{{ text }}</span>
+  <Tippy>
+    <template #content>
+      <div v-for="row in title" :key="row">{{ row }}</div>
+    </template>
+    <span>{{ text }}</span>
+  </Tippy>
 </template>