JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<br />
<br />
<br />
<br />
<span class="#layers-info title">Free Shipping</span>

<div class="floating-layer"> <span class="header">test</span>

    <p class="content">It's me, Mario</p>
</div>

CSS

BODY {
    font-family: Verdana, Arial, Sans-Serif;
}
.title {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}
.floating-layer {
    display: none;
    border: solid 1px #000000;
    border-radius: 3px;
    padding: 3px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background-color: #efefef;
    width: 250px;
    height: 75px;
}
.floating-layer .header {
    margin: 0px auto;
    padding: 1px;
    border: solid 1px #000000;
    background-color: red;
    color: white;
    width: 98%;
    display: block;
    text-align: center;
    font-weight: bold;
}
.floating-layer .content {
    background-color: white;
    padding: 1px;
    margin: 2px auto 0px auto;
    color: black;
    border: solid 1px #000000;
    height: 60%;
    width: 98%;
}

JavaScript

$.fn.setPosition = function (attachToBody, posX, posY, offsetX, offsetY) {
    return this.each(function () {
        var el = $(this);
        var pos = el.position();
        if (offsetY == null) {
            offsetY = 0;
        }
        if (offsetX == null) {
            offsetX = 0;
        }
        if (posY == null) {
            posY = pos.top;
        }
        if (posX == null) {
            posX = pos.left;
        }
        el.css({
            position: "absolute",
            marginLeft: 0,
            marginTop: 0
        });
        if ($(window).width() > (posX + offsetX + el.width())) {
            el.css({
                top: posY + offsetY,
                left: posX + offsetX
            });
        } else if ($(window).width() < el.width()) {
            var bufferedPos = 0;
            el.css({
                top: posY + offsetY,
                left: bufferedPos
            });
        } else {
            var bufferedPos = $(window).width() - 20 - el.width();
            el.css({
                top: posY + offsetY,
                left: bufferedPos
            });
        }
        if (attachToBody) if (!el.parent().is('body')) {
            el.remove().appendTo('body');
        }
    });
}
$.fn.IsClicked = function (data) {
    if ($(this).prop("isClicked") == undefined) {
        $(this).prop("isClicked", false);
    } // end if
    if (data != undefined && data != null) {
        $(this).prop("isClicked", data);
    } // end if/else

    return $(this).prop("isClicked");
};

$(function () {
    $(document).bind("layer-info-selection", function (e, data) {
        data.OriginalEvent.preventDefault();
        console.log(data.OriginalEvent);
        var sourceEvent = data.OriginalEvent;
        var coords = {
            x: 0,
            y: 0,
            offsetX: 40,
            offsetY: 40
        };
        if (sourceEvent.type == 'touchstart') {
            coords.x = sourceEvent.originalEvent.touches[0].pageX;
           ...