Always return tooltip text, then users could use their own code to fine tune tooltips

[wxiaoguang]

Creating a lot of tippy instances is expensive.

I think CalendarHeatmap could always provide the tooltip content by data-tippy-content (even if tooltip=false), then users could use their own code to fine tune tooltips.

Thank you very much!

ps: diff with ignoring space looks clearer 😁

[silverwind]

Maybe we should give some context, it's https://github.com/go-gitea/gitea/issues/23461#issuecomment-1469573764 and my comments below.

[razorness]

@silverwind thank you for your hint. @wxiaoguang, I considered to speed up the lib in general at first by moving tooltip generation and tippy initialization towards mouseover events.

As next: I think about making tippy.js optional and add an event (f.e. 'showTooltip') plus the current tooltip method so people can choose whatever they want.

[wxiaoguang]

I considered to speed up the lib in general at first by moving tooltip generation and tippy initialization towards mouseover events.

If I understand correctly, tippy uses trigger: 'mouseenter focus', internally.

I have tried an approach and it works:

function lazyTooltipOnMouseEnter(e) {
  e.target.removeEventListener('mouseenter', lazyTooltipOnMouseEnter, true);
  // create the tippy
}

el.addEventListener('mouseenter', lazyTooltipOnMouseEnter, true); // and `focus` event, if necessary.

Using capture will make the lazyTooltipOnMouseEnter execute first, and create the tippy instance, then the tippy instance can handle the current mouseenter event and show.

[razorness]

I forgot to mention, that v2.0.2 is just published and you can try yourself.

The magic happens here:

https://github.com/razorness/vue3-calendar-heatmap/blob/b71c195304e46d35f7a0bf91b3ba538052840e6b/src/components/CalendarHeatmap.vue#L58

and here: https://github.com/razorness/vue3-calendar-heatmap/blob/b71c195304e46d35f7a0bf91b3ba538052840e6b/src/components/CalendarHeatmap.vue#L287-L317

If you have a better approach or suggestions, your feedback is welcome! :)

[wxiaoguang]

Awesome! I think this PR could be closed, thank you very much.

[razorness]

v2.0.3 removes the DOM interaction in favor of a Set to prevent possible issues with Vue rendering.