JSFiddle - React, Tailwind, and code Playground

HTML

<p>blah blah blah</p>
<div id="paper"></div>

CSS

text { pointer-events: none; }

JavaScript

window.onload = function () {
    
    var label;
    
    Raphael.el.hoverInBounds = function (inFunc, outFunc) {
       
        var inBounds = false;
        var highlighted;

        // Mouseover function. Only execute if `inBounds` is false.
        this.mouseover(function (e) {
            if (!inBounds) {
                inBounds = true;
                inFunc.call(this);
            }
        });
        
        this.mousemove( function(e) {
            var x = e.layerX || e.offsetX || e.clientX,
                y = e.layerY || e.offsetY || e.clientY;
            var bb = this.text.getBBox();
            if( (x > bb.x) && (x < bb.x + bb.width) && (y>bb.y-5) && (y<bb.y+bb.height) ) {
                label.attr("text", this.text.attr("href"));
            } else {
                label.attr({
                   text: "Mouse over on circles for file name"
                });
            };
        });

        // Mouseout function
        this.mouseout(function (e) {
            var x = e.offsetX || e.clientX,
                y = e.offsetY || e.clientY;

            // Return `false` if we're still inside the element's bounds
            if (this.isPointInside(x, y)) return false;

            inBounds = false;
            outFunc.call(this);
        });

        return this;
    }

    var p = new Raphael("paper");

    // Hover in function 
    function hoverIn() {
        this.animate({
            r: 35
        }, 500);
    }

    // Hover out function
    function hoverOut(ev) {
        this.animate({
            r: 30
        }, 500);
    }

     label = p.text(10, 30, "Mouse over on circles for file name").attr({
        "text-anchor": "start",
        "font-size": "15px"
    });
    
    var bc1 = p.circle(70, 120, 30);
    bc1.text = p.text(70, 120, "File 1").attr({
        href: "file1.pdf", 
        target: "blank"
    });

    var bc2 = p.circle(70, 200, 30)
    bc2.text = p.text(70, 200, "File 2").attr({
        href: "file2.pdf",
       ...