JSFiddle - React, Tailwind, and code Playground

by meyertee

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="outer">
    <div id="txt">Move the vertical divider of the Result area to see how the red layer flips its position. It'll only flip to the top while the overflow at the bottom is smaller than the new top position. <a href="https://github.com/jquery/jquery-ui/commit/7f808b2047725cd8fde51a948cb4e5f5946c82e1">This commit</a> seems to cause the bug.</div>
    <div id="inner">
        <div id="partner">Partner</div>
        <div id="popup"></div>
    </div>
</div>

CSS

body {
    font: 15px sans-serif;
}
#txt{
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
}
#outer {
    background-color: #f3f3f3;
    min-height:2000px;
    padding-top: 210px;
}
#inner {
    background-color: green;
    position: relative;
}
#popup {
    background-color: red;
    position: absolute;
    width: 100px;
    height: 200px;
}
#partner {
    background-color: yellow;
    margin-left:100px;
    display: inline-block;
}

JavaScript

$(function () {
    var $popup = $("#popup").detach();
    var $partner = $("#partner");
    var visible = false;

    function update() {
        $popup.position({
            my: "left top",
            at: "left bottom",
            of: $partner[0],
            within: window,
            collision: "flip"
        });
    }
    
    function open() {
        visible = true;
        $popup.appendTo("body");
        update();
    }

    open();
    setInterval(function () {
        if (visible) {
            update();
        }
    }, 100);
});