Fix flickering tooltip when hovering modified in FileExplorer. Use the new, improved tooltip also in gallery to show full name, modified and size of an item.

frontend/src/components/FileModified.vue

@@ -2,15 +2,11 @@
   <td class="modified right">
     <time
       :datetime=datetime
-      @mouseenter="startHover"
-      @mousemove="updatePosition"
-      @mouseleave="endHover"
+      @mouseenter="tooltip?.startHover"
+      @mousemove="tooltip?.updatePosition"
+      @mouseleave="tooltip?.endHover"
     >{{ modified }}</time>
-    <Teleport to="body">
-      <div v-if="showTooltip" class="cursor-tooltip" :style="tooltipStyle">
-        {{ tooltipText }}
-      </div>
-    </Teleport>
+    <CursorTooltip ref="tooltip" :text="tooltipText">{{ tooltipText }}</CursorTooltip>
   </td>
 </template>
 
@@ -18,12 +14,15 @@
 import { Doc } from '@/repositories/Document'
 import { formatUnixDate } from '@/utils'
 import { computed, ref } from 'vue'
+import CursorTooltip from './CursorTooltip.vue'
 
 const props = defineProps<{
     doc: Doc
     now: number
 }>()
 
+const tooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+
 // Reference props.now to trigger reactivity when time updates
 const modified = computed(() => {
   props.now  // trigger reactivity
@@ -37,50 +36,4 @@ const datetime = computed(() =>
 const tooltipText = computed(() =>
   datetime.value.replace('T', ' ').replace('Z', ' UTC')
 )
-
-const showTooltip = ref(false)
-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>