JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="dialog">
    <a href="#">Link</a>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <a id="tooltip" title="test">When clicking here I end up at the top of the dialog and my click handler is never invoked</a>
</div>

CSS

p { margin-bottom: 200px; }

.red { color: red !important; }

JavaScript

$("#dialog").dialog({
    height: 300
});
$("#tooltip").tooltip()
    .on( "click", function(event) {
        $( this ).toggleClass( "red" );
    });