How can I create an info box in HTML that shows information relevant to a hovered SVG path?

Question

I have an SVG with a couple paths that describe regions, like this:

<svg>
    <g>
        <path d="..."></path>
        <path d="..."></path>
        <path d="..."></path>
    </g>
</svg>

And I'd like to display a div based on which path is hovered. I tried putting the respective divs inside the paths in order to be able to do this in the css:

path:hover div.infobox
{
    display: block
}

div.infobox
{
    display: none
    position: absolute
}

But that doesn't work, because the SVG is not rendered properly if I hide non SVG elements in it.

Is there an easy way to do this by CSS or with jQuery?

Lenny · Accepted Answer · 2013-12-05T18:20:46.653

1

in jQuery it should just be...

$("path").on("hover", function() {
    $(".infobox").toggle();
});

And just create the div somewhere on the page (outside of the svg) with absolute position.

If you need to do it for a specific SVG it might be better to do

$("#svg-id").find("path").on("hover", function() {
    $(".infobox").toggle();
});

Update for related path / div

SVG:

<path id="infobox1">...</path>
<path id="infobox2">...</path>
...

HTML:

<div class="infobox infobox1">...</div>
<div class="infobox infobox2">...</div>
...

Javascript:

$("#svg-id").find("path").on("hover", function() {
    //hide all info boxes
    $(".infobox").hide();
    //show the right one based on id - class relation
    $("."+$(this).attr('id')).show();
});

edited Dec 05 '13 at 18:20

answered Dec 05 '13 at 16:53

Lenny

5,663
2
19
27

Problem is, I need to select the respective div, I have 20 regions and 20 divs. Is there a better way than to manually label all regions and their divs with a common class? – ggPeti Dec 05 '13 at 16:59
Not sure what you're trying to do exactly, but you could do it by class or index. – Lenny Dec 05 '13 at 18:16
Added example above using class / id as reference to each other. – Lenny Dec 05 '13 at 18:21
Neat solution, I like it. – ggPeti Dec 06 '13 at 12:00

score 1 · Answer 2 · edited May 23 '17 at 12:29

If a simple title tooltip would do, then you can use SVG's title element (that does the same thing as an HTML title attribute):

<svg>
  <g>
    <path d="..."><title>text 1</tile></path>
    <path d="..."><title>text 2</tile></path>
    <path d="..."><title>text 3</tile></path>
  </g>
</svg>

You could also use SVG text:

<svg>
  <style type="text/css">
    text {display:none}
    svg > g > g:hover text {display:inline}
  </style>
  <g>
    <g>
      <path d="..."/>
      <text>text 1</text>
    </g>
    <g>
      <path d="..."/>
      <text>text 2</text>
    </g>
    <g>
      <path d="..."/>
      <text>text 3</text>
    </g>
  </g>
</svg>

You'd of course have to position the text properly and possibly add a background, either using a filter, as described in this anwer, or a rect.

How can I create an info box in HTML that shows information relevant to a hovered SVG path?

2 Answers2