I created an SVG map, however, I want to make it so that the there is a tooltip (that follows the mouse) when somebody hovers over it and is unique to each path. In addition to having a tooltip, I would like each SVG path to be clickable and lead to a link if possible.

I would like to style the tooltip with this CSS:

.map-tooltip {
  position: absolute;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:#d3d3d3 solid 1px;
  background: #fff;
  color: black;
  font-family: Comfortaa, Verdana;
  font-size: smaller;
  padding: 8px;
  pointer-events:none;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

And here is my SVG: /

Thanks for helping!

I created an SVG map, however, I want to make it so that the there is a tooltip (that follows the mouse) when somebody hovers over it and is unique to each path. In addition to having a tooltip, I would like each SVG path to be clickable and lead to a link if possible.

I would like to style the tooltip with this CSS:

.map-tooltip {
  position: absolute;
  display: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border:#d3d3d3 solid 1px;
  background: #fff;
  color: black;
  font-family: Comfortaa, Verdana;
  font-size: smaller;
  padding: 8px;
  pointer-events:none;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

And here is my SVG: https://jsfiddle/3ojet4oL/

Thanks for helping!

• javascript
• html
• css
• dictionary
• svg

Share Improve this question Follow edited Jun 15, 2016 at 19:02 spjy asked Jun 15, 2016 at 7:59 spjyspjy 46799 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can do this with the following script (read the ments)

var tooltip = document.querySelector('.map-tooltip');

// iterate through all `path` tags
[].forEach.call(document.querySelectorAll('path.HI-map'), function(item) {
  // attach click event, you can read the URL from a attribute for example.
  item.addEventListener('click', function(){
    window.open('http://google.co.il')
  });

  // attach mouseenter event
  item.addEventListener('mouseenter', function() {
    var sel = this,
        // get the borders of the path - see this question: http://stackoverflow./q/10643426/863110
        pos = sel.getBoundingClientRect()

    tooltip.style.display = 'block';
    tooltip.style.top = pos.top + 'px';
    tooltip.style.left = pos.left + 'px';
  });

  // when mouse leave hide the tooltip
  item.addEventListener('mouseleave', function(){
    tooltip.style.display = 'none';
  });
});

See the updated jsfiddle: https://jsfiddle/3ojet4oL/3/

Update

1. For dynamic tooltip text, there are some ways. One of them is to store the text on data-* attribute. In my example data-tooltip, then you can read it when you want to show the tooltip:

html

<path class="HI-map maui" data-tooltip="tooltip10"

javascript

 tooltip.innerText = item.getAttribute('data-tooltip');

Just now, I saw that you want to put an html in the tooltip. So I change a little bit the logic as you can see in the jsfiddle below. The logic is to store the tooltip content in object then, get it by the data-tooltip attribute.

2. For tooltip will move with the cursor, you just need to use mousemove event:

item.addEventListener('mousemove', function(e) {
  tooltip.style.top = e.clientY + 'px';
  tooltip.style.left = e.clientX + 'px';
});

https://jsfiddle/3ojet4oL/7/

Update 2

For dynamic URL add attribute data-link the script will open this URL in new window.

https://jsfiddle/3ojet4oL/9/