search

laurens94 / vue-timeline-chart

A timeline component for Vue3
https://laurens94.github.io/vue-timeline-chart/
MIT License
32 stars 2 forks source link

Tooltips / pop-up menus #16

Closed james-astra closed 1 month ago

james-astra commented 1 month ago

Great work! What a clean and easy-to-use library.

It would be very beneficial to add an easy way to add tooltip text / pop-up menus to items.

For example, a use may want to hover over and see the absolute duration of the range, including start/end timestamps etc.

laurens94 commented 1 month ago

Thank you! I'm glad that you enjoy the library. :)

It's relatively easy to add tooltips. I've added an example to the docs with a Tippy.js implementation: https://laurens94.github.io/vue-timeline-chart/examples/tooltips.html

Another option is to add a div to an item and give it a title or add something using CSS with the item slot:

<template #item="{item}">
  <div :title="'item.title" style="inset: 0; position: absolute;"></div>
</template>

For performance reasons all items have the contain: strict CSS declaration set, but you might want to overwrite it with contain: layout size to allow overflow.

james-astra commented 1 month ago

Thanks so much! Great to see it in the docs too :)

I did as you said in the end and used the item slot to fill the range with a div so that I could use my existing PrimeVue tooltip directive.

Works great! Thanks :)