¿Es posible mejorar la apariencia predeterminada de la información sobre herramientas de título de svg

Me gustaría cambiar la apariencia predeterminada de la información sobre herramientas en los elementos svg (título) por cualquier medio como js o css.

Incluso probé cosas como esta:

var title = document.createElementNS('http://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"><div style="background:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(title);

pero independientemente de lo que inserte como el contenido de texto del título, simplemente se representa como una cadena.

¿Hay alguna forma de diseñar la información sobre herramientas predeterminada? También son bienvenidas otras alternativas simples y directas para crear información sobre herramientas en svg sin usar ningún complemento.

Respuestas a la pregunta(1)

Su respuesta a la pregunta