JSFiddle - React, Tailwind, and code Playground

by Alexey Bachurin

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<img id="avatar" class="img-responsive img-thumbnail avatar" title="Кликни чтобы скачать" src="https://static01.nyt.com/images/2006/08/27/business/27knight_CA2.190.jpg">
<a id="button" href="docs/docs1.pdf" target="_blank">Скачать PDF</a>
<img id="avatar" class="img-responsive img-thumbnail avatar" title="Кликни чтобы скачать" src="https://static01.nyt.com/images/2006/08/27/business/27knight_CA2.190.jpg">
<a id="button" href="docs/docs2.pdf" target="_blank">Скачать PDF</a>
<span id="button">Скачать PDF</span>

CSS

#button {
	position: absolute;
	margin: 220px 0 0 15px;
	padding-top: 10px;
  padding-left: 30px;
	width: 130px;
	height: 30px;
	background: green;
	border-radius: 4px;
	cursor: pointer;
	display: none;
	z-index: 999999999;
 }

JavaScript

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

function getOffsetSum(elem) {
    var top=0, left=0
    while(elem) {
        top = top + parseInt(elem.offsetTop)
        left = left + parseInt(elem.offsetLeft)
        elem = elem.offsetParent
    }

    return {top: top, left: left}
}

function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}
var image;

$("#button")
	.on("click", function(){
	});

$("img")
	.on("mouseover", function(){
		image = this;
		var pos = getOffset(this);
		var width = $(this).width();
		var height = $(this).height();
		// если они меньше минимальных, то не обрабатываем наведение курсора
		if(width < 80 || height < 80) return false;
		console.log(pos.top, pos.left);
		$("#button")
			.css({"top": pos.top, "left": pos.left})
			.animate({opacity:'show'}, 200);
	})

	.on("mouseleave", function(){
		$("#button")
			.animate({opacity:'hide'}, 200)
			.stop(true, true);
	});