tooltipLegendTemplate location

Hi, I javascript I have a sciChart and I am using the RolloverModifier.
With this code

sciChartSurface.chartModifiers.add(
            new RolloverModifier({
                showRolloverLine: true,
                tooltipDataTemplate: getTooltipDataTemplate,
                placementDivId: "tooltip-div-id",
            })
const getTooltipDataTemplate = (seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY) => {
            // Lines here are returned to the tooltip and displayed as text-line per tooltip
            const lines = [];
            const val = seriesInfo.yValue;
            const x = seriesInfo.formattedXValue
            lines.push(`Exposure ${Math.trunc(x)}`)
            if(seriesInfo.seriesName.includes('T8') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(1)} °C` ); }
            if(seriesInfo.seriesName.includes('HU') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(2)} %` ); }
            if(seriesInfo.seriesName.includes('mA') && val != null) { lines.push(`${tooltipTitle}: ${val} mA` ); }
            if(seriesInfo.seriesName.includes('Factor') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(7)}` ); }
            return lines;
        };

I am able to obtain The first image where the tooltip are shown outside the chart area (just below the chart) and for each series there is a colored box. This is fine, but I do not really want individual boxes.

I then tries to use the tooltipLegendTemplate instead of tooltipDataTemplate and with this code:

// Add some interaction modifiers to show zooming and panning
sciChartSurface.chartModifiers.add(
new RolloverModifier({
showRolloverLine: true,
showTooltip: false,
tooltipLegendTemplate: getTooltipLegendTemplate,
placementDivId: “tooltip-div-id”,
}));

// Override the standard tooltip displayed by CursorModifier
        const getTooltipLegendTemplate = (seriesInfos, svgAnnotation) => {
            // Lines here are returned to the tooltip and displayed as text-line per tooltip
            let outputSvgString = "";
            let x;
            // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
            seriesInfos.forEach((seriesInfo, index) => {
                let unit
                x = seriesInfo.formattedXValue
                switch(seriesInfo.seriesName) {
                    case "T8": unit = ' °C'; break;
                    case "HU": unit = ' %'; break;
                    case "Aging Factor Small": unit = ' %'; break;
                    case "Aging Factor Large": unit = ' %'; break;
                    case "Space Charge Factor Small": unit = ' %'; break;
                    case "Space Charge Factor Large": unit = ' %'; break;
                    case "mA first 40kV": unit = ' mA'; break;
                    case "mA first 50kV": unit = ' mA'; break;
                    case "mA first 60kV": unit = ' mA'; break;
                    case "mA first 95kV": unit = ' mA'; break;
                    case "mA first 125kV": unit = ' mA'; break;
                }
                outputSvgString += `<text x="8" y="${20*(index+2)}" font-size="16" font-family="Verdana" fill="${seriesInfo.stroke}">
                                    ${seriesInfo.seriesName}: ${seriesInfo.formattedYValue} ${unit}
                                    </text>`;
            });
            // Content here is returned for the custom legend placed in top-left of the chart
            return `<svg>
                        <text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Exposure ${Math.trunc(x)}</text>
                        ${outputSvgString}
                    </svg>`;
        };

With this code I can obtain the second image. But I would like to place the SVG outside of the chart area (just like I pointed in the image). The placementDivId: “tooltip-div-id” does not seem to work for tooltipLegendTemplate, it only works for tooltipDataTemplate. Can we place the SVG outside of the chart area?

Thank you !
Alex