Hover position

Jan 2024

Mar

May

Hover over the timeline to see the hover time

Code

<script setup>
  import { computed, ref } from 'vue';

  const groups = [
    { id: 'group1' },
    { id: 'group2' },
  ];
  const markers = computed(() => {
    return [mouseHoverPosition.value ? {
      start: mouseHoverPosition.value,
      type: 'marker',
      id: 'mousehover',
    } : null].filter(Boolean);
  });

  const mouseHoverPosition = ref(null);
  function onMousemoveTimeline ({ time }) {
    mouseHoverPosition.value = time;
  }
  function onMouseleaveTimeline () {
    mouseHoverPosition.value = null;
  }
</script>


<template>
  <Timeline
    :items="items"
    :groups="groups"
    :viewportMin="1703112200000"
    :viewportMax="1714566600000"
    :markers="markers"
    @mousemoveTimeline="onMousemoveTimeline"
    @mouseleaveTimeline="onMouseleaveTimeline"
  />

  {{ mouseHoverPosition ? new Date(mouseHoverPosition).toLocaleString() : 'Hover over the timeline to see the hover time' }}
</template>

TIP

Make sure dynamic items such as a hover position marker are not added to the items prop, as it would rerender all items every time the hover position changes and slow down the component.