30 lines
765 B
Vue
30 lines
765 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
hotkey?: string[];
|
|
text?: string;
|
|
}>();
|
|
|
|
const { show, hide } = useTooltip();
|
|
const triggerRef = ref<HTMLElement | null>(null);
|
|
|
|
let hasCursor: boolean | null = null;
|
|
const checkHasCursor = () => {
|
|
if (hasCursor === null && typeof window !== 'undefined') {
|
|
hasCursor = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
|
}
|
|
return hasCursor ?? false;
|
|
};
|
|
|
|
const onMouseEnter = () => {
|
|
if (triggerRef.value && checkHasCursor()) {
|
|
show(triggerRef.value, props.hotkey, props.text);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="triggerRef" @mouseenter="onMouseEnter" @mouseleave="hide" :class="$attrs.class" v-bind="$attrs">
|
|
<slot />
|
|
</div>
|
|
</template>
|