JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="http://rawgit.com/tlindig/position-calculator/master/dist/position-calculator.min.js"></script>
<ul class="popup" id="menu">
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

<div class="placeholder">placeholder 1</div>
<div class="placeholder">placeholder 2</div>
<div class="placeholder">placeholder 3</div>
<div class="placeholder">placeholder 4</div>

CSS

.placeholder, #menu {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    width: 100px;
    background: #f2f2f2;
    float:left;
}

.popup {
    position:absolute;
    top:0;
    left:0;
    display:none;
}

JavaScript

$(".placeholder").on('mouseover', function() {
    var $menu = $("#menu").show();
    var pos = $.PositionCalculator( {
        target: this,
        targetAt: "top right",
        item: $menu,
        itemAt: "top left",
        flip: "both"
    }).calculate();

    $menu.css({
        top: parseInt($menu.css('top')) + pos.moveBy.y + "px",
        left: parseInt($menu.css('left')) + pos.moveBy.x + "px"
    });
});

$(".placeholder").mouseout(function() {
    $("#menu").hide();
});