JSFiddle - React, Tailwind, and code Playground

by danoman7

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css">
<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
<div id="Item1111" class="danotip">
 Me
</div>

CSS

.danotip { margin: 0 3px 3px 3px; padding: 1px; font-size: 1em; height: 20px; width: 120px; text-align:center; background:red;}

JavaScript

$(function ($) {

            $("#Item1111").qtip({
                content: "Right Click",
                position: {
                    target: 'mouse', // Position it where the click was...
                    adjust: { mouse: false} // ...but don't follow the mouse
                },
                show: 'mousedown', // Can't use click event for this, sorry!
                events: {
                    show: function (event, api) {
                        /* 
                        event.originalEvent contains the event that caused the callback to be fired.
                        event.originalEvent.button tells us which button was clicked e.g. 1= left, 2 = right;
                        */
                        return event.originalEvent.button === 2;
                    }
                }
            })
            .bind('contextmenu', function () { return false; });
        }(jQuery));