JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="ref"> 
    <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" alt="">
    <span class="trigger">1</span>

    <div class="test">
        <div class="pos">lalala</div>
        <span class="i"></span>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
}
.ref {
    background:tomato;
    max-width:640px;
    position: relative;
}
img {max-width:100%; height: auto;}
.trigger {
    position: absolute;
    top:20%;
    left:15%;
    background:rebeccapurple;
    width: 20px;
    height: 20px;
    color: white;
    text-align: center;
    line-height:20px;
}
.test {position: absolute;}
.pos {
    height:50px;
    width:150px;
    background:skyblue;
    text-align: center;
    margin:0 0 20px;
}
.i {position: absolute; height: 0; width: 0; border:0 solid transparent; border-width:20px 20px 0; border-top-color:blue;}

.flipped .pos {margin:20px 0 0;}
.flipped .i {border-width:0 20px 20px; border-top-color:transparent; border-bottom-color:blue;}

JavaScript

function moveit() {
$(".test").position({
        my: "center bottom",
        at: "center top",
        of: ".trigger",
        collision: "flipfit",
        using: function (obj, info) {
            if (info.vertical != "top") {
                $(this).removeClass("flipped");
            } else {
                // Si on doit passer l'élément en dessous car il est trop grand
                $(this).addClass("flipped");
            }
            if (info.horizontal != "left") {
                $(this).removeClass("flipped-left");
            } else {
                // Si on doit passer l'élément à droite car il est trop grand
                $(this).addClass("flipped-left");
            }
            $(this).css({
                left: obj.left + 'px',
                top: obj.top + 'px'
              });
        }
    
    });
    
    $(".i").position({
        my: "center bottom",
        at: "center top",
        of: ".trigger",
        within: ".test"
    });
}

$(window).resize(function(){
   moveit(); 
});
moveit();