JSFiddle - React, Tailwind, and code Playground

HTML

<li class="commentBox"><a href="#">Signup</a>

    <div class="arrow_box">Create an account.</div>
    <div style="bottom:200px;">asdsd</div>
    <div style="bottom:200px;">asdsd</div>
    <div style="bottom:200px;">asdsd</div>
    <div style="bottom:200px;">
        <input type="submit" class="submit" name="submit" value="Submit" />
    </div>
</li>

CSS

.arrow_box {
    display:none;
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    top: 75px;
    padding: 10px 10px;
    width: 170px;
    left: -50px;
    text-align: center;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: relative;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
    position: absolute;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
    position: absolute;
}
ul li.commentBox {
    position: relative;
}
.commentBox a:hover .arrow_box {
    opacity: 1;
    display: block;
}
.commentBox .arrow_box:hover {
    cursor: default;
    opacity: 0;
}

JavaScript

$('.commentBox a').on("mouseenter", function (e) {
    $('.arrow_box').show();
});
$('.commentBox a').on("mouseleave", function () {
    $('.arrow_box').hide();
});