JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: absolute;">
    <div class="some-size toolipster" style="z-index: 20;"></div>
    <div class="some-size" style="z-index: 19;"></div>
    <div class="some-size other"></div>
</div>

CSS

.some-size 
{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    background-color: #FF0000;
    
}

.other {
    left: 100px;
    background-color: #0000FF;
}

.animation{
    cursor: pointer;
  animation: grow-animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: grow-animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: grow-animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: grow-animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: grow-animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes grow-animationFrames{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(2.00) scaleY(2.00) ;
  }
}

@-moz-keyframes grow-animationFrames{
  0% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -moz-transform:  scaleX(2.00) scaleY(2.00) ;
  }
}

@-webkit-keyframes grow-animationFrames {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(2.00) scaleY(2.00) ;
  }
}

@-o-keyframes grow-animationFrames {
  0% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -o-transform:  scaleX(2.00) scaleY(2.00) ;
  }
}

@-ms-keyframes grow-animationFrames {
  0% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -ms-transform:  scaleX(2.00) scaleY(2.00) ;
  }
}

JavaScript

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

$(function () {
    var divs = $('.some-size').not('.toolipster'),
        tooltips = $('.toolipster' );
    
    tooltips.hover(
        function() {
            var tip = this;
            divs.each(function() {
                if (overlaps(tip, this) && tip.style.zIndex > this.style.zIndex) {
                    $(this).addClass('animation');
                }
            });
        },
        function() {
            $('.animation').each(function() {
                $(this).removeClass('animation');
            });
        }
    );
});