JSFiddle - React, Tailwind, and code Playground

by cloud8421

HTML

<div id="bubble_content">Contenuto</div>
<div id="container">Contenitore</div>

CSS

#bubble_content {
    visibility: hidden
}

JavaScript

//ma cosa ve lo spieghiamo a fare tanto non capireste una sega, merde!

jQuery.fn.j0_bubble = function(bubble,settings) {
    var config = {move:30,speed:300};
    
    if (settings) jQuery.extend(config, settings);
    
    jQuery(bubble).css("opacity","0");
    jQuery(bubble).css("z-index","0");
        
    this.each(function() {
        jQuery(this).css("z-index","1");
        jQuery(this).css("position","relative");
        
        bubble_top = parseInt((jQuery(bubble).css("top").replace("px","")));
        bubble_new_top = bubble_top - config.move;
        jQuery(this).mouseover(function() {
        jQuery(bubble).stop().animate({"opacity":"1","top":bubble_new_top},config.speed);  
    }).mouseout(function(){
        jQuery(bubble).stop().animate({"opacity":"0","top":bubble_top},config.speed);  
    });
    });

    return this;
};

$('#container').j0_bubble($('#bubble_content');