CursorModifier tooltip is getting clipped

I want to display a tooltip on my scatter plot when the user hovers over a data point. However, the tooltip is getting clipped if the text is too long, even when there’s sufficient space within the chart (see attached image). Is there a way to ensure the tooltip can use the full width of the chart?

tooltipDataTemplate: (seriesInfo: SeriesInfo[]) => {
const tooltipContent: string[] = [];
seriesInfo.forEach(info => {
const metadata = info.pointMetadata as {
drift: number;
importance: number;
name: string;
weightedScore: number;
};
if (info?.isHit) {
const name = dialog ? metadata.name : metadata.name.length > 17 ? ${metadata.name.substring(0, 17)}... : metadata.name;
tooltipContent.push(
name,
Drift: ${metadata.drift.toFixed(2)},
Importance: ${metadata.importance.toFixed(2)},
Weighted Score: ${metadata.weightedScore.toFixed(2)},
);
}
});
return tooltipContent;
},

I also tried to customize it using html and css, but no luck so far.

tooltipDataTemplate: (seriesInfo: SeriesInfo[]) => {
const tooltipContent: string[] = [];
seriesInfo.forEach(info => {
const metadata = info.pointMetadata as {
drift: number;
importance: number;
name: string;
weightedScore: number;
};
if (info?.isHit) {
tooltipContent.push(`

${metadata.name}

`);
}
});
return tooltipContent;
},