CODEWITHSUNDEEP
htmlcssd3.jssvg
zetacu
zetacu

Reputation: 17612

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/

Upvotes: 0

Views: 1543

Answers (1)

user5827241
user5827241

Reputation:

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>

Upvotes: 1

Related Questions