JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<div id='shipping_tick' style="position: relative;">
          <img id='shipping_img' src="http://www.google.co.in/images/srpr/logo4w.png" style="width:100px; margin:0 0px 0px -6px; position: right;"/>
          <div class="shp-base" id="shp-tooltip" style="position:fixed; z-index: 3000; display: none;">
            <div class="shp-base" style="background:black;opacity:0.2;border-radius:14px;filter:alpha(opacity=20)">
            </div> 
            <div class="shp-base" style="position:relative;background:white;margin:4px;padding:8px;border:4px solid #67CB40;border-radius:12px"> 
              <div class="shp-base" style="font-size:14px;margin-bottom:8px">
                This product will be dispatched <br/>
                within 2 business day. Once it is <br/>
                shipped you will be notified by email <br/>
                and supplied a tracking number.<br/>
                Please allow another 2-3 busniess <br/>
                days for delivery.
              </div> 
            </div>
          </div>
        </div>

CSS

#shipping_tick{
    margin:50px;
}

JavaScript

$(document).ready(function() {
            
            $("#shipping_img").mousemove(function(e) { 
              
              // put other effect in when moving over the element
              
              // from e you can get the pageX(left position) and pageY(top position) 
              // im not sure if it was the relative or the absolute position
              // i added 10 pxs on the top and left to show the tooltip a bit after              
              $('#shp-tooltip').css('left', e.offsetX + 10).css('top', e.offsetY + 10).css('display', 'block');
              
            });
            
            $("#shipping_img").mouseout(function() { 
              $('#shp-tooltip').css('display', 'none');
            });
            
          });