JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="Button11" onmouseover="changeContent4()">Actions</div>
<div id="bubble">
    <div id="text1">text 1 fading in</div>
</div>

CSS

#bubble {
    display:none
}

JavaScript

var i = 0;

    function changeContent4() {
        bubble(function () {
            $("#text1").text('Some text here ' + (i++));
        });
    }

    var fadeTimeout = null;

    function bubble(callback) {
        if ($.isFunction(callback)) callback();

        if (fadeTimeout == null) $("#bubble").fadeIn(1000, function () {
            fadeTimeout = setTimeout(bubbleOff, 20000);
        });
        else {
            clearTimeout(fadeTimeout);
            fadeTimeout = setTimeout(bubbleOff, 20000);
        }
    }

    function bubbleOff() {
        $("#bubble").fadeOut(1000, function () {
            fadeTimeout = null;
        });
    }