jessica jessica -4 years ago 67
CSS Question

How to show a tooltip after clicking an SVG?

I have an SVG circle, it has a small svg circle inside it and a polygon inside the small circle, when i click on the polygon it should rotate and it's working fine, but after rotation a tool-tip should appear above the polygon and i don't know how to show it, i put it in a div above my svg, here is my code:



document.querySelector('polygon').addEventListener('click', function() {
this.classList.toggle('rotated');
});

.rotated {
transform: rotate(-90deg);
}
polygon {
transition: all 1s;
}

<div class="marker marker-index-0" style="display: none;">
<h3>I should be a tooltip</h3>
</div>
<svg>
<circle cx="40" cy="122.5" r="26" fill="red"></circle>
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g>
</svg>




Answer Source

A transition alone won't do it, because you can't do anything after it's done.

Instead, it would be a good time for you to learn CSS Animations.

Note that I applied the classes to a container involving both the polygon and the tooltip, in order to avoid synchronization errors.

document.querySelector('polygon').addEventListener('click', function() {
  if(!document.getElementById('animationContainer').classList.contains("animated")) {
    document.getElementById('animationContainer').classList.add("animated");
 document.getElementById('animationContainer').classList.add("rotated");
  } elseĀ {
    document.getElementById('animationContainer').classList.toggle('rotated');
    document.getElementById('animationContainer').classList.toggle('faded');
  }
});
@keyframes polygonAnimation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-90deg); }
100% { transform: rotate(-90deg); }
}
@keyframes polygonReverseAnimation {
0% { transform: rotate(-90deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes markerAnimation {
0% { display: none; opacity: 0; }
50% { display: block; opacity: 0; }
100% { display: block; opacity: 1; }
}
@keyframes markerReverseAnimation {
0% { display: block; opacity: 1; }
50% { display: block; opacity: 0; }
100% { display: none; opacity: 0; }
}
#animationContainer .marker {
  opacity: 0;
  position: absolute;
  z-index: 10;
}
.rotated polygon {
  animation-name: polygonAnimation;
  animation-duration: 2s;
  animation-fill-mode: both;
}
.rotated .marker {
  animation-name: markerAnimation;
  animation-duration: 2s;
  animation-fill-mode: both;
}
.faded polygon {
  animation-name: polygonReverseAnimation;
  animation-duration: 2s;
  animation-fill-mode: both;
}
.faded .marker {
  animation-name: markerReverseAnimation;
  animation-duration: 2s;
  animation-fill-mode: both;
}
<div id="animationContainer">
<div class="marker marker-index-0">
   <h3>I should be a tooltip</h3>
</div>
<svg>
<circle cx="40" cy="122.5" r="26" fill="red"></circle>
<g class="markerG" transform="matrix(1,0,0,1,40,122.5)"><circle cx="0" cy="0" r="14" fill="#000000" style="cursor: pointer;"></circle><polygon points="1 -1 1 -7 -1 -7 -1 -1 -7 -1 -7 1 -1 1 -1 7 1 7 1 1 7 1 7 -1" fill="#ffffff"></polygon></g>
</svg>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download