Hover position

Jan 1, 1970 00:00

00:00:10

00:00:20

00:00:30

00:00:40

00:00:50

Hover over the timeline to see the hover time

Code

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

  const  = [
    { : 'group1' },
    { : 'group2' },
  ];
  const  = (() => {
    return [. ? {
      : .,
      : 'marker',
      : 'mousehover',
    } : null].();
  });

  const  = (null);
  function  ({  }) {
    . = ;
  }
  function  () {
    . = null;
  }
</script>

<template>
  <
    ="timeline"
    =""
    ="1703112200000"
    ="1714566600000"
    =""
    @=""
    @=""
  >
    < #marker="{}">
      < ="marker-content">
        {{ new (.start).() }}
      </>
    </>
  </Timeline>

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

<style scoped>
  .timeline:deep(.marker) {
    contain: unset;
    display: flex;
  }

  .marker-content {
    font-size: small;
    align-self: end;
    text-wrap: nowrap;
    padding: 0 4px;
    opacity: 0.5;
  }
</style>

INFO

contain: unset is set on the marker to allow the text content to overflow the 1px wide marker.

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.