JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<br/>
<span id="hlp1">
    This is a panel that needs help
</span>

<br/>
<br/>
<br/>
<br/>
<br/>
<table style="width:100%;text-align:center;">
    <tr>
        <td>Problematic</td>
        <td id="hlp2">Confusing it is</td>
    </tr>
</table>
<br/>
<br/>
<form>
    <label>Name</label>
    <input type="text" id="hlpName" />
    <label>Age</label>
    <input type="text" id="hlpAge" />
    <button id="hlpSubmit">Submit</button>
</form>

JavaScript

/** @suppress{duplicate} */
var m = {}; // namespace

m.help = {};
/**
 * Add the help overlay SVG panel.
 */
m.help.addSVG = function () {
    var svg = $("<div id='helpsvg' style='width:100%;height:100%;background-color:rgba(0,0,0,0.6);position:absolute;top:0;left:0;z-index:2000'><svg xmlns='http://www.w3.org/2000/svg' style='width:100%;height:100%'><defs><marker id='head' orient='auto' markerWidth='2' markerHeight='4' refX='0.1' refY='2'><path id='headpoly' d='M0,0 V4 L2,2 Z' fill='black'/></marker></defs></svg></div");
    $(document.body).append(svg);
}

m.help.remove = function () {
    var svg = $('#helpsvg');
    if (!svg) {
        return;
    }
    svg.remove();
}

/**
 * Add a help label to the specified position.
 * @param {number} tox
 * @param {number} toy
 * @param {string} label
 * @param {string} pos
 * @param {number=} length
 */
m.help.addLabel = function (tox, toy, label, pos, length) {
    var svg = $('#helpsvg svg');
    if (!svg) {
        return;
    }

    var awayx = 50;
    var awayy = 30;

    if (pos.indexOf("top") > -1) {
        awayy *= -1;
    }

    if (pos.indexOf("left") > -1) {
        awayx *= -1;
    }

    if (length) {
        awayx *= length;
        awayy *= length;
    }

    var fromx = tox + awayx;
    var fromy = toy + awayy;
    var labelawayx = -15;
    var labelawayy = awayy > 0 ? 15 : -15;
    var color = 'white';

    var midx = fromx;
    var midy = toy;
    var ns = "http://www.w3.org/2000/svg";

    var path = document.createElementNS(ns, "path");
    path.setAttribute('marker-end', 'url(#head)');
    path.setAttribute('stroke-width', '2');
    path.setAttribute('fill', 'none');
    path.setAttribute('stroke', color);
    path.setAttribute('d', 'M' + fromx + ',' + fromy + ' Q' + midx + ',' + midy + ' ' + tox + ',' + toy);

    var text = document.createElementNS(ns, "text");
    text.setAttribute('x', fromx + labelawayx);
    text.setAttribute('y', fromy + labelawayy);
    text.setAttribute('fill', color);
  ...