Tooltips

This example shows how to add tooltips using Tippy.js.

INFO

When manually adding tooltips using CSS, you might want to overwrite the contain: strict CSS declaration on those timeline items. Setting it to layout size will still benefit from increased performance and allows overflown content (such as tooltips) to be visible.

Jan 1, 1970 00:00

00:00:10

00:00:20

00:00:30

00:00:40

00:00:50

Code

<script setup>
  import {  } from 'vue';
  // import tippy from 'tippy.js'; (disabled for vitepress, but should be enabled)

  let  = [];

  function  () {
    if (!.tippy) {
      // ensure tippy is loaded (due to import within vitepress)
      (() => (), 100);
      return;
    }

    .(() => .destroy());
     = [];
    tippy('[data-tippy-content]', {
      : 'horizontal',
      : () => {
        .();
      },
    });
  }

  (() => {
    ();
  });

  const  = [
    { : 1, : 'Tooltip 1', : 'Hover me!', : 'group1', : 'range', : 1707135072000, : 1708431072000, : { '--item-background': 'var(--color-4)' } },
    { : 2, : 'Tooltip 2', : 'Hover me!', : 'group1', : 'range', : 1708517472000, : 1709813472000, : { '--item-background': 'var(--color-2)' } },
    { : 3, : 'Tooltip 3', : 'Hover me!', : 'group1', : 'range', : 1709903872000, : 1711199872000, : { '--item-background': 'var(--color-3)' } },
  ];
</script>

<template>
  <
    =""
    ="[ { : 'group1' } ]"
    ="1705587257600"
    ="1711639872000"
    @=""
  >
    < #item="{  }">
      <
        ="inset: 0; position: absolute; padding: .2em 1em; color: white; font-weight: bold;"
        :data-tippy-content=".tooltip"
      >
        ⚑ {{ .name }}
      </>
    </>
  </Timeline>
</template>