JSFiddle - React, Tailwind, and code Playground

by crislivinitup

HTML

<div id="foo" style="background-color:#00C">
<input type="button" value="button1"/>
</div>

<br />
<br />
<div id="bar" style="background-color:#F00">
<input type="button" value="button2" />
</div>

JavaScript

(function(w, d) {
    function createPopup(el, options) {
        // Create popup from DOM elements, a string, or read from a template
        var popup = d.createElement('div');
		
		//*** I haven't been able to get className to work, so I commented it out
        // popup.className = options.className;
        
		//***popup.innerText = 'Foobar!';
        popup.insertAdjacentHTML("afterBegin",'Foobar!');
        // Possibly insert popup into DOM, depending on how you've implemented it
        //***el.parentNode.insertAfter(popup, el);
		el.appendChild(popup);
		
		//**** added to hide div by default
		popup.style.display = 'none';
		
		//*** added to connect this.popup (from MyPlugin function) to the reference of the created div
		return popup;
    }

    var defaultOptions = {
		//*** I haven't got className to work, so I just took out the related functions
        className: 'popup'
    };

    var MyPlugin = function(el, options) {
        this.element = el;
        this.options = options || defaultOptions;
        this.popup = createPopup(el, this.options);

        var self = this;
		

	
        // Ignoring IE for now
	    el.addEventListener('mouseover', function() {
			//alert("clicked");
            self.popup.style.display = 'block';
            // Possibly want to set position of popup, depending on how you've implemented it
        });
		
        el.addEventListener('mouseout', function() {
            self.popup.style.display = 'none';
        });
		
		
    };

    MyPlugin.prototype = {
        // Other methods you want an instance of MyPlugin to have, for example:
        setText: function(text) {
			
			//***I didn't get the innerText to work, so I changed it with synonymous code
			//***this.popup.innerText = text;
            this.popup.insertAdjacentHTML("beforeEnd",text);
        }
    };

    // Static methods
    MyPlugin.setDefaults = function(options) {
        defaultOptions = options;
    };

    w.MyPlugin = MyPlugin;
})(window,...