zetacu zetacu - 2 months ago 5x
CSS Question

show element on top of all element

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
z-index:999; position: fixed;
to the
but is not working.

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


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">
          Hello, <b>World</b>!