JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jamescryer/grumble.js/master/js/Bubble.js"></script>
<script src="https://github.com/jamescryer/grumble.js/raw/master/images/bubble-sprite.png"></script>
<script src="https://raw.github.com/jamescryer/grumble.js/master/js/jquery.grumble.min.js"></script>
<div id="prap">
    <p class="ex" id="grumble3">With close button</p>
</div>

CSS

html { height: 100% } body { height: 100% } body { font-family: Georgia,
        Times, Times New Roman, serif; font-style: italic; background: #87CEFA;
    background: -moz-linear-gradient(90deg, #87CEFA 0%, #6960EC 100%); background:
        -webkit-gradient(linear, left bottom, left top, color-stop(0%,#87CEFA),
        color-stop(100%,#6960EC)); background: -webkit-linear-gradient( left bottom,
        left top, #87CEFA 0%,#6960EC 100%); background: -o-linear-gradient(left,
        #87CEFA 0%,#6960EC 100%); background: -ms-linear-gradient(left, #87CEFA
        0%,#6960EC 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87CEFA',
        endColorstr='#6960EC',GradientType=1 ); background: linear-gradient(left,
        #87CEFA 0%,#6960EC 100%); color: #FFF; text-align: center; background-color:#87CEFA;
    background-repeat: repeat-x; } fieldset { border: 1px solid #2F6FAB; margin:
        1em 0 1em 0; padding: 0 1em 1em; line-height: 1.5em; } #content { width:
        300px ; margin-left: auto ; margin-right: auto ;} ::selection { background:
        #ff79c5; color: white; text-shadow: none; }


.hilight { border:1px solid #ddd;
    background-color:#ff6c24;
}

a
{
    color : #FFF;
    text-shadow: 1px 1px 1px rgba(0,0,0, 0.3);
}    
a:link{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
    cursor:hand;
}

.ex {
    display:inline-block;
    width: 150px;
    margin-left:300px;
    margin-top:300px;
    height:20px;
    font-size: 12px;
    font-family: Consolas, "Lucida Console", monospace;
}

.grumble-button {
    font-size:11px;
}

div.alert {
    display: none;
    
}

.grumble{
    position:absolute;
    background-image: url(https://github.com/jamescryer/grumble.js/raw/master/images/bubble-sprite.png);
    background-repeat: no-repeat;
    z-index: 99999;
    }

    .grumble-text {
        position:absolute;
        text-align:center;
        z-index: 99999;
        display: table;
        overflow:hidden;
 ...

JavaScript

$('#grumble3').mouseup(function(eventObj) {

    var elemZIndex = $(this).css('z-index', '100');
    var elemPos = $(this).offset();

    $('#prap').append('<div id="newer" class="new" style="position:absolute; left:' + (eventObj.pageX) + 'px; top:' + elemPos.top + 'px; z-index:' + (elemZIndex + 10) + '">&nbsp;</div>');


    $('#newer').grumble({
        text: ' <a href="#me" target="_blank"><h3>Download me</h3></a> <br/> <a href="#edit"> <h3>Edit me</h3> </a>  <br/><a href="#delete" onClick=alert("del")> <h3>Delete me</h3> </a>',
        angle: (Math.random() * 360 + 150),
        distance: 3,
        showAfter: 15,
        hideAfter: false,
        //type : 'alt-',
        hasHideButton: true,
        // just shows the button
        buttonHideText: 'Pop!',
        onShow: function() {
            $('#grumble3').addClass("hilight");
        },
        onBeginHide: function() {
            $(".hilight").removeClass("hilight");
        },
        onHide: function() {
            $("#newer").empty();
            $("#newer").detach();
            $("#newer").remove();
           //$('.grumble-text').remove();
           //$('.grumble').remove();
           //$('.grumble-button').remove();
        }
    });
}).mousedown(function() {
    $('#grumble3').addClass("hilight");
});