qTip2 - My test case

by Hüseyin BABAL

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<a href="#test" class="selector" title="My tooltip text">Right Clickable Disabled</a><br/>
<a href="#test" title="test">Right Clickable</a>
<div id="contextMenu" style="display:none">Test</div>

JavaScript

$(document).ready(function () {
    
    $('.selector').qtip({
    content: $('#contextMenu'), // Use a pre-formatted element for the content
    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;
             */
            if(event.originalEvent.button !== 2) {
                // IE might throw an error calling preventDefault(), so use a try/catch block.
                try { event.preventDefault(); } catch(e) {}
            }
        }
    }
})
// Little snippet that stops the regular right-click menu from appearing
.bind('contextmenu', function(){ return false; });
    
});