@hanology/cham-browser 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanology/cham-browser",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "CHAM — browser-compatible parser, serializer, and site generator for Classical Han Annotated Markdown",
   "type": "module",
   "main": "dist/index.js",

package/template/src/components/AnnotationTooltip.vue

@@ -12,7 +12,11 @@ const props = defineProps<{
   style?: Record<string, string>
 }>()
 
-const emit = defineEmits<{ close: [] }>()
+const emit = defineEmits<{
+  close: []
+  tooltipEnter: []
+  tooltipLeave: []
+}>()
 const { layout } = useReadingMode()
 const isMobile = computed(() => window.innerWidth < 768)
 
@@ -43,6 +47,8 @@ function onBackdropTouchMove() {
           :style="style"
           @click.stop
           @touchmove.stop
+          @mouseenter="emit('tooltipEnter')"
+          @mouseleave="emit('tooltipLeave')"
         >
           <button v-if="isMobile" class="ann-handle" @click="emit('close')">
             <span class="ann-handle-bar" />

package/template/src/views/PieceView.vue

@@ -152,16 +152,33 @@ const proseSections = computed(() => {
   return result
 })
 
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+function cancelHide() {
+  if (hideTimer) { clearTimeout(hideTimer); hideTimer = null }
+}
+function scheduleHide(delay = 150) {
+  cancelHide()
+  hideTimer = setTimeout(() => { tooltip.hide(); hideTimer = null }, delay)
+}
+
 function handleAnnotationHover(event: MouseEvent, annotations: Annotation[]) {
+  cancelHide()
   tooltip.show(event, annotations)
 }
 function handleAnnotationLeave() {
-  if (window.innerWidth >= 768) tooltip.hide()
+  if (window.innerWidth >= 768) scheduleHide()
 }
 function handleAnnotationTap(event: MouseEvent, annotations: Annotation[]) {
+  cancelHide()
   tooltip.toggle(event, annotations)
 }
-function dismissTooltip() { tooltip.hide() }
+function handleTooltipEnter() {
+  cancelHide()
+}
+function handleTooltipLeave() {
+  if (window.innerWidth >= 768) scheduleHide()
+}
+function dismissTooltip() { cancelHide(); tooltip.hide() }
 const { getAuthor, loadShared } = useData()
 await loadShared()
 
@@ -321,6 +338,8 @@ function tcy(n: number): string {
         :layer-labels="layerLabels"
         :style="tooltip.style"
         @close="dismissTooltip"
+        @tooltip-enter="handleTooltipEnter"
+        @tooltip-leave="handleTooltipLeave"
       />
 
       <Teleport to="body">
@@ -443,6 +462,8 @@ function tcy(n: number): string {
         :layer-labels="layerLabels"
         :style="tooltip.style"
         @close="dismissTooltip"
+        @tooltip-enter="handleTooltipEnter"
+        @tooltip-leave="handleTooltipLeave"
       />
 
       <Teleport to="body">