JSFiddle - React, Tailwind, and code Playground

HTML

<div class="callback hidden-xs">
<div class="callback_link">
<div class="callback_block"><div class="callback_a"></div><div class="callback_b"></div></div>
</div>
<div class="callback_hover"><span>Подсказка</span></div>	
</div>

CSS

.callback {background: #ba6d09; opacity: 0.9; border-radius: 50% !important; cursor: move; height: 65px; position: fixed; right: -100px; width: 65px; z-index: 9999; cursor:pointer;}

.callback .callback_link::before {background: rgba(0, 0, 0, 0) url() no-repeat scroll center center / 35px auto; content: ""; height: 65px; left: 0; position: absolute; top: 0; width: 65px; z-index: 0;}

.callback {-webkit-animation: callback_anim1 10s linear 0s normal none infinite; -moz-animation: callback_anim1 10s linear 0s normal none infinite; animation:callback_anim1 10s linear 0s normal none infinite;}

.callback:hover {-webkit-animation: callback_anim 10s linear 0s normal none infinite; -moz-animation: callback_anim 10s linear 0s normal none infinite; animation: callback_anim 10s linear 0s normal none infinite;}

.callback .callback_block {height: 65px; position: absolute; width: 65px;}

.callback .callback_a {-webkit-animation: callback 10s linear 0s infinite; -moz-animation: callback 10s linear 0s infinite; animation: callback 10s linear 0s infinite; background-color: transparent; border: 20px solid #ba6d09; border-radius: 100% !important; bottom: -42.5px; box-sizing: border-box; height: 150px; opacity: 0.01; position: absolute; right: -42.5px; width: 150px;}

.callback .callback_b {-webkit-animation: callback 1.5s linear 0s infinite; -moz-animation: callback 1.5s linear 0s infinite; animation: callback 1.5s linear 0s infinite; background-color: transparent; border: 20px solid #ba6d09; border-radius: 100% !important; bottom: -42.5px; box-sizing: border-box; height: 150px; opacity: 0.01; position: absolute; right: -42.5px; width: 150px;}

@keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.8; transform: rotate(0deg) scale(1) skew(1deg);}
}
@-webkit-keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg)...

JavaScript

$(document).ready(function(){
	
	$('.callback').hover(
		function() {
			var v = $('.callback_hover');
			if(!v.hasClass('fHovered')) {
				v.stop().css('display','block').animate({'opacity':1},1000).addClass('fHovered');
			}
		},
		function () {
			var v = $('.callback_hover');
			if(v.hasClass('fHovered')) {
				v.stop().animate({'opacity':0},1000,function() {
					$(this).css('display','none');
				}).removeClass('fHovered');
			}
		}
		
		);

	    var top_wHeight = getWindowHeight();
		
		var top_sHeight = $(window).scrollTop();
        
        var top_scrollBottom = $(window).scrollTop() + $(window).height();

		var top_result =  top_wHeight + top_sHeight + top_wHeight;

 	
 	$('.callback').css({'position':'absolute','top' : top_result + 'px','right':'100px','transition': "top 1.0s 0.05s"});
	
	
	callbackReturn();
	
	$(window).scroll(function() {
		
		callbackReturn();
		
	});
	
	$(window).resize(function() {
		
		callbackReturn();
		
	});
	
	
	function callbackReturn() {
		var wHeight = getWindowHeight();
		
		var sHeight = $(window).scrollTop();
		
		var result = wHeight + sHeight - 165;
		
		$('.callback').css({'position':'absolute','top' : result + 'px','right':'100px'});
	}
	
	
	function getWindowHeight() {
		
		var windowHeight;
		
		windowHeight = $(window).height();
		
		return windowHeight;
		
	}
});