How to add a custom tooltip to donut chart in filament php widget laravel

[eloi-charly]

I have a problem with displaying the tooltip for the DONUT chart in a Laravel Filament PHP Widget. Can someone help me?

[Narek1331]

protected function getOptions(): RawJs
{
// Create custom JavaScript for tooltip options
$js = <<<'JS'
{
responsive: true,
plugins: {
tooltip: {
enabled: true,
mode: 'index',
intersect: false, // Allow tooltip to show when hovering near the segments
callbacks: {
label: function(context) {
const label = context.dataset.label || '';
const value = context.raw || 0;
return label + ': $' + value.toFixed(2);
},
title: function(tooltipItems) {
return tooltipItems[0].label; // Use the label of the current segment
}
}
},
legend: {
display: true,
position: 'top',
}
},
elements: {
arc: {
borderWidth: 2, // Increase border width for better visibility
}
}
}
JS;

return RawJs::make($js);

}