kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tasks): disable task glance tooltip on touch devices 

Mouse event emulation from taps on touch devices caused the glance
tooltip to appear unexpectedly with no reliable way to dismiss it.
Gate the tooltip behind a `(hover: hover) and (pointer: fine)` media
query so it only activates on devices with a real pointer.
This commit is contained in:
Claude 2026-04-24 08:01:39 +00:00 committed by kolaente
parent 879f839729
commit 6bf586e928
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/tasks/partials/TaskGlanceTooltip.vue
View File

@ -8,7 +8,10 @@
<slot />
</span>
<Teleport to="body">
<Teleport
v-if="canHover"
to="body"
>
<CustomTransition name="fade">
<div
v-if="showTooltip"
@ -82,6 +85,7 @@
<script setup lang="ts">
import {ref, computed, onUnmounted, nextTick} from 'vue'
import {computePosition, flip, offset, shift} from '@floating-ui/dom'
import {useMediaQuery} from '@vueuse/core'
import type {ITask} from '@/modelTypes/ITask'
import {getTaskIdentifier} from '@/models/task'
@ -101,6 +105,9 @@ const props = defineProps<{
const HOVER_DELAY = 1000 // 1 second
const MAX_DESCRIPTION_LENGTH = 150
// Taps on touch devices emulate mouseenter, which would show the tooltip unexpectedly.
const canHover = useMediaQuery('(hover: hover) and (pointer: fine)')
const triggerRef = ref<HTMLElement | null>(null)
const tooltipRef = ref<HTMLElement | null>(null)
const showTooltip = ref(false)
@ -152,6 +159,10 @@ async function updatePosition() {
}
function handleMouseEnter() {
if (!canHover.value) {
return
}
// Clear any existing timeout
if (hoverTimeout) {
clearTimeout(hoverTimeout)