JSFiddle - React, Tailwind, and code Playground

by jan88

HTML

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

JavaScript

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

        // Mouseover function. Only execute if `inBounds` is false.
        this.mouseover(function () {
            if (!inBounds) {
                inBounds = true;
                inFunc.call(this);
            }
        });

        // 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() {
        this.animate({
            r: 30
        }, 500);
    }

    var label = p.text(10, 530, "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",
        target: "blank"
    });

    var bc3 = p.circle(190, 120, 30)
    bc3.text = p.text(190, 120, "File 3").attr({
        href: "file3.pdf",
        target: "blank"
    });

    var btnSet = p.set(bc1, bc2, bc3).attr({
        fill: "#e2e2e2",
        stroke: "#cbcbcb"
    });

   
    var btnText = p.set(bc1.text, bc2.text, bc3.text);

    
    btnText.mouseover(function (e) {
        label.attr("text", this.attr("href"));
    }).mouseout(function (e) {
        label.attr({
            text: "Mouse over on circles for file name"
        });
    });
    
   ...