JSFiddle - React, Tailwind, and code Playground

by suatatan

HTML

<br/><br/>
  <div class="bubbleInfo">
      <div class="bubble" title="Text 1">Set cursor</div>
  </div>
  <br/><br/><br/><br/>
  <div class="bubbleInfo">
      <div class="bubble" title="Text 2">Set cursor</div>
  </div>

CSS

/* Booble */
 .bubbleInfo {
    position: relative;
    width: 500px;
}
.bubble {
}
.popup {
    position: absolute;
    display: none;
    z-index: 50;
    border-collapse: collapse;
    font-size: .8em;
}
.popup td.corner {
    height: 13px;
    width: 15px;
}
.popup td#topleft {
    background-image: url(bubble/bubble-1.png);
}
.popup td.top {
    background-image: url(bubble/bubble-2.png);
}
.popup td#topright {
    background-image: url(bubble/bubble-3.png);
}
.popup td.left {
    background-image: url(bubble/bubble-4.png);
}
.popup td.right {
    background-image: url(bubble/bubble-5.png);
}
.popup td#bottomleft {
    background-image: url(bubble/bubble-6.png);
}
.popup td.bottom {
    background-image: url(bubble/bubble-7.png);
    text-align: center;
}
.popup td.bottom img {
    display: block;
    margin: 0 auto;
}
.popup td#bottomright {
    background-image: url(bubble/bubble-8.png);
}

JavaScript

$(function () {
    var i = 0;
    var z = 1;
    do {
        title = $('.bubble:eq(' + i + ')').attr('title');
        if (!title) {
            z = 0;
        } else {
            $('.bubble:eq(' + i + ')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>' + title + '</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
            $('.bubble:eq(' + i + ')').removeAttr('title');
        }
        i++;
    } while (z > 0)

    $('.bubbleInfo').each(function () {
        var distance = 10;
        var time = 250;
        var hideDelay = 500;
        var hideDelayTimer = null;
        var beingShown = false;
        var shown = false;
        var trigger = $('.bubble', this);
        var info = $('.popup', this).css('opacity', 0);

        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: -40,
                    left: 10,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function () {
                    beingShown = false;
                    shown = true;
                });
            }
            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer =...