Is it possible to improve the appearance of the svg header tooltip

Question

I would like to change the appearance of the tooltip in svg elements (header) by any means like js or css.

I even tried things like this:

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);

but no matter what I insert as the textContent header, it just displays as a string.

Is there a way to style the default tooltip? Other simple and simple alternatives for creating tooltips in svg without using any plugins are also welcome ...

Answer 1

: Title ?. , , .

SVG, , , . script, .

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <g id="component">
        <rect id="content" width="50" height="50">
        </rect>
        <g class="tooltip" transform="translate(20,20)" opacity="0.9">
            <rect rx="5" width="100" height="25"></rect>
            <text x="15" y="16">Hello</text>
        </g>
    </g>
</svg>

CSS hover, :

#component .tooltip {visibility: hidden}
#component:hover .tooltip {
    visibility: visible;
}
.tooltip text {
    fill: black;
    font-size: 12px;
    font-family: sans-serif;
}
.tooltip rect {
    fill: yellow;
    stroke: blue;
}

JSFiddle.

<defs> .