JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="hoverBox"  data-hoverbox="Lorem ipsum dolor sit amet.">Uses options and Data</div>

CSS

div {
    margin: 40px;
}






.hoverBox {
    position: relative;
    z-index: 1;
}

.hoverBox .HB {
    display: none;
    position: absolute;
    z-index: 2;
}

.
hoverBox .HB {
    
    padding: 10px;
}

JavaScript

(function($){
    $.fn.extend({
        hoverBox: function( options ) {
 
            var defaults = {
                general: {
                    background: null,
                    height: null,
                    border: '5px solid #333'
                }
            };

            return this.each(function() {
                
                  var obj = $(this),
                      objD = obj.data(),
                      o = $.extend(true, {},defaults, options, objD ),
                      
                      // General styling
                      og = o.general;
                
                
                /* Initiate */
                init();
                
                
                /* Mouse Actions */ 
                obj.on({
                
                    click: function() {
                        mouse_actions();
                    },
                    mouseenter: function() {
                        mouse_actions();
                    },
                    mouseleave: function() {
                        mouse_actions();
                    }
                    
                });
                
                function init() {
                    $('<div class="HB">'+ o.hoverbox +'</div>').appendTo( obj );
                    obj.addClass('hoverBox')
                }
                
                function mouse_actions() {
                    var hb = $('.HB', obj)
                    hb.stop(true,true).fadeToggle(500);
                }
                
               
                           
                
               /* 
                function showUp() {
                 alert('Hello There');
                }showUp();
               */               
                    
                    
                 
                
                
            });
        },
        test2: function () {
        
        }
    });
})(jQuery);

$(document).ready(function() {
   ...