JSFiddle - React, Tailwind, and code Playground

by CHRIS ROBBINS

HTML

<div id="state" class="grid_4 alpha">
  <a href="index.html" title="Back home"><img src="images/maine_state.png" alt="maine_state" width="199" height="250" /></a>
  <div class="tooltip first">
    <div class="gps_ring one"></div>
    <div class="done"></div>
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <div class="tooltip">
    <div class="gps_ring two"></div>
    <div class="two_done"></div>
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <div class="tooltip">
    <div class="gps_ring three"></div>
    <div class="three_done"></div>
    <span class="tooltiptext">Tooltip text</span>
  </div>
  
</div>

CSS

.gps_ring {
  border: 3px solid green;
  -webkit-border-radius: 30px;
  height: 18px;
  width: 18px;
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.0
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}
.done, .two_done, .three_done {
  display: none;
  border: 3px solid blue;
  border-radius: 30px;
  height: 18px;
  width: 18px;
  position: relative;
 }

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  width: 80px;
}
.first {
  top: 150px;
  
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}


/* Tooltip arrow */

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

JavaScript

$(document).ready(function() {

   $('.gps_ring.one').mouseover(function() {
     $('.one').replaceWith($('.done'));
     $('.done').show();
   });
   $('.gps_ring.two').mouseover(function() {
     $('.two').replaceWith($('.two_done'));
     $('.two_done').show();
   });
   $('.gps_ring.three').mouseover(function() {
     $('.gps_ring.three').replaceWith($('.three_done'));
     $('.three_done').show();
   });



 });