zetacu zetacu - 13 days ago 5
HTML Question

HTML SVG: show element on top of all elements

I created a svg chart, I added a tooltip that shows the corresponding value when the mouse hovers.

The problem is, since the path is rendered after the bars are created, then the tooltip is show behind the path http://take.ms/lljq3. what I need is that the tooltip is always in front of everything.

I try to add

z-index:-1; position: relative;
to the
path
and
z-index:999; position: fixed;
to the
text
but is not working.

See the example here: https://jsfiddle.net/sgcw8btx/

Answer

When creating svg elements, following rule applys:

3.3 Rendering Order

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

Isn't it possible to place the tooltip element before the bar / line? Otherwise you could try using use?

<use xlink:href="#id" />

And you could try to embed the HTML directly:

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(20,30)">
    <rect width="200" height="150"/>
    <foreignObject width="200" height="150">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div>
          Hello, <b>World</b>!
        </div>
      </body>      
    </foreignObject>
  </g>
</svg>