How can I control where a jquery-ui Dialog displays?

help
1

It’s easy (once you know how) to invoke a jQuery-UI dialog in Meteor:

  1. In the console, enter “meteor add linto:jquery-ui” to install the package

  2. Add (if you don’t already have it) a “hide” CSS class:

    .hide {
    visibility: hidden;
    display: none;
    }

  3. Add some HTML to the Template where the Dialog should display, hiding it by default, such as:

    Post-Travel Bottom

    post Travel image

    This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

  4. In response to some event, unhide the div and call dialog() on it, such as:

    ‘click #imgPostTravelBottom’: function() {
    $( “#dialog” ).removeClass(‘hide’);
    $( “#dialog” ).dialog();

The problem is that this causes the dialog to display in the middle of the page; I want the dialog to display with its NW corner at the tip of the cursor/pointer/finger.

So how can I control where the dialog appears?