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">
                  <div class="gps_ring one"></div>
                  <div class="done"></div>
                <span class="tooltiptext">Tooltip text</span>
                
                </div>
            </div>

CSS

.gps_ring.one {
    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;}
}
/* Tooltip container */
.tooltip {
  position: relative;
    display: inline-block;
    left:-50px;
    top:-80px;
}

/* 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;
}
 .done {
   display: none;
    border: 3px solid green;
    border-radius: 30px;
    height: 18px;
    width: 18px;
  }

JavaScript

$(document).ready(function() {
 
 $('.gps_ring.one').mouseover(function(){
 $('.one').replaceWith($('.done')); 
 $('.done').show();
 });
 
 

});