Recently, I created a custom tooltip for my chart.js chart by implementing a div that moves above the chart. While it works well, I noticed that the tooltip is capturing mouse events rather than propagating them to the parent element (the chart) for updating data points and repositioning the tooltip accordingly. This behavior was unexpected as most people usually face the opposite issue. Despite trying to trigger bubbling by calling emit directly on the chart element or through other methods in the code, I haven't been able to achieve the desired result.
The structure of the tooltip template is as follows:
<template>
<div :style="computedStyle" class="tooltip" @mouseover="$emit('mouseover')" @mousemove="$emit('mousemove')">
<div ref="tooltip-background" v-html="svg" class="tooltip-background"/>
<div class="tooltip-content">
<div v-for="item of this.items">
<div class="tooltip-content-values">
<span class="">User activity: </span>
<span class="tooltip-content-values-value">{{item.value}}</span>
</div>
</div>
<div class="tooltip-content-date">{{date}}</div>
</div>
</div>
</template>
<style scoped>
.tooltip {
position: absolute;
width: 300px;
}
.tooltip-background {
width: 300px;
position: absolute;
z-index: 1
}
.tooltip-content {
position: absolute;
z-index: 2;
margin-left: 25px;
margin-top: 3px;
padding: 15px;
}
.tooltip-content-values {
font-family: Work Sans, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 20px;
color: #666666;
}
.tooltip-content-values-value {
font-family: Work Sans, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 20px;
color: #111111;
}
.tooltip-content-date {
margin-top: 5px;
font-family: Work Sans, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 24px;
color: #666666;
opacity: 0.5;
}
</style>