Fix modified tooltip (exact timestamp) flickering on/off because of timestamp updates every second. Made the tooltip follow mouse cursor.

frontend/src/assets/main.css

@@ -237,6 +237,7 @@ header nav.headermain {
   z-index: 101;
   content: attr(data-tooltip);
   position: absolute;
+  pointer-events: none;
   font-size: 1rem;
   text-align: center;
   padding: .5rem 1rem;
@@ -248,9 +249,6 @@ header nav.headermain {
   white-space: pre;
   animation: appearbriefly calc(10 * var(--transition-time)) linear forwards;
 }
-.modified [data-tooltip]:hover:after {
-  transform: translate(calc(1rem + 1ex + -100%), calc(-1.5rem + 100%));
-}
 @keyframes appearbriefly {
   from {
     opacity: 0;

frontend/src/components/FileExplorer.vue

@@ -17,7 +17,7 @@
         <td class="name">
           <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => {editing = null}" />
         </td>
-        <FileModified :doc=editing :key=nowkey />
+        <FileModified :doc=editing :now=nowkey />
         <FileSize :doc=editing />
         <td class="menu"></td>
       </tr>
@@ -55,7 +55,7 @@
               <button tabindex=-1 v-if="store.cursor == doc.key" class="rename-button" @click="() => (editing = doc)">🖊️</button>
             </template>
           </td>
-          <FileModified :doc=doc :key=nowkey />
+          <FileModified :doc=doc :now=nowkey />
           <FileSize :doc=doc />
           <td class="menu">
             <button tabindex=-1 @click.stop="contextMenu($event, doc)">⋮</button>

frontend/src/components/FileModified.vue

@@ -1,22 +1,86 @@
 <template>
   <td class="modified right">
-    <time :data-tooltip=tooltip :datetime=datetime>{{ doc.modified }}</time>
+    <time
+      :datetime=datetime
+      @mouseenter="startHover"
+      @mousemove="updatePosition"
+      @mouseleave="endHover"
+    >{{ modified }}</time>
+    <Teleport to="body">
+      <div v-if="showTooltip" class="cursor-tooltip" :style="tooltipStyle">
+        {{ tooltipText }}
+      </div>
+    </Teleport>
   </td>
 </template>
 
 <script setup lang="ts">
 import { Doc } from '@/repositories/Document'
-import { computed } from 'vue'
+import { formatUnixDate } from '@/utils'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+    doc: Doc
+    now: number
+}>()
+
+// Reference props.now to trigger reactivity when time updates
+const modified = computed(() => {
+  props.now  // trigger reactivity
+  return formatUnixDate(props.doc.mtime)
+})
 
 const datetime = computed(() =>
   new Date(1000 * props.doc.mtime).toISOString().replace('.000Z', 'Z')
 )
 
-const tooltip = computed(() =>
+const tooltipText = computed(() =>
-  datetime.value.replace('T', '\n').replace('Z', ' UTC')
+  datetime.value.replace('T', ' ').replace('Z', ' UTC')
 )
 
-const props = defineProps<{
+const showTooltip = ref(false)
-    doc: Doc
+const mouseX = ref(0)
-}>()
+const mouseY = ref(0)
+let hoverTimer: ReturnType<typeof setTimeout> | null = null
+
+const tooltipStyle = computed(() => ({
+  left: `${mouseX.value + 12}px`,
+  top: `${mouseY.value + 12}px`,
+}))
+
+const startHover = (e: MouseEvent) => {
+  mouseX.value = e.clientX
+  mouseY.value = e.clientY
+  hoverTimer = setTimeout(() => {
+    showTooltip.value = true
+  }, 500)
+}
+
+const updatePosition = (e: MouseEvent) => {
+  mouseX.value = e.clientX
+  mouseY.value = e.clientY
+}
+
+const endHover = () => {
+  if (hoverTimer) {
+    clearTimeout(hoverTimer)
+    hoverTimer = null
+  }
+  showTooltip.value = false
+}
 </script>
+
+<style scoped>
+.cursor-tooltip {
+  position: fixed;
+  z-index: 10000;
+  padding: .5rem 1rem;
+  border-radius: 3rem 0 3rem 0;
+  box-shadow: 0 0 1rem var(--accent-color);
+  background-color: var(--accent-color);
+  color: var(--primary-color);
+  white-space: pre;
+  pointer-events: none;
+  font-size: 1rem;
+}
+</style>