JSFiddle - React, Tailwind, and code Playground

by TeslaNick

HTML

<div id="foo">Right Click Me</div>

CSS

#foo {
    padding: 10px;
    margin: 30px;
    
    border-radius: 10px;
    text-align: center;
    border: 1px solid #ddd;
    background-color: #eee;
}

.yui3-overlay {
    padding: 4px;
    border: 1px solid #ccc;
    
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.yui3-overlay:hover {
    background: #29c;
    cursor: pointer;
}

JavaScript

YUI().use('event-contextmenu', 'overlay', function(Y) {

    var contextMenuSingleton = new Y.Overlay({
        bodyContent: "HELLO WORLD<br>CLICK ME TO CLOSE",
        visible: false,
        constrain: true
    });
    
    contextMenuSingleton.render(Y.one('body'));
    
    Y.one('#foo').on('contextmenu', function(e) {
        contextMenuSingleton.set('xy', [ e.pageX, e.pageY ]);
        contextMenuSingleton.show();
    });

    contextMenuSingleton.get('boundingBox').on('click', function() {
        contextMenuSingleton.hide();
    });
});