JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder"></div>

JavaScript

var rsr = Raphael("holder", '1160', '1400');

xpos = 200;
ypos = 200;
rad = 50;

var rectext, el, txt;

cir = rsr.circle(xpos, ypos, rad);
cir.attr({
    fill: '#444',
        'fill-opacity': 1,
    stroke: 'none'
});

cir.hover(function () {
    this.animate({
        r: rad * 1.2
    }, 200);
    recttext = rsr.set();
    el = rsr.rect(0, 0, 0, 0, 3);
    el.attr({
        fill: '#fff'
    });
    txt = rsr.text(4, 10, "Title text").attr({
        "text-anchor": "start",
        fill: '#000000',
        "font-size": 12
    });
    recttext.push(el);
    recttext.push(txt);
    var att = {
        width: recttext.getBBox().width,
        height: recttext.getBBox().height
    };
    el.attr(att);
    recttext.translate(xpos - recttext.getBBox().width / 2, ypos - rad - 20);
}, function () {
    this.animate({
        r: rad
    }, 100);
    recttext.remove();
    el.remove();
    txt.remove();
});