Documentation

determines whether the inline-Dialog will show on a mouseOver or mouseClick of the trigger.
Options: true/false
Default: false

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
        onHover:true
    }
);

determines if the the inline dialog is closed when its trigger is clicked
Options: true/false
Default: false

AJS.InlineDialog(
    AJS.$("#inlineDialog"),
    "myDialog",
    "dialog-content.html",
    {
    closeOnTriggerClick: true
    }
);

determines if the inline-Dialog will bind the event-handler to the trigger event, use this option if you wish to bind the event handler programatically at a different point. If true then useLiveEvents is disabled. If true then the items argument to the inline dialog constructor can be the empty jQuery collection, i.e., AJS.$().
Options: true/false
Default: false

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    noBind: true
    }
);

determines the fade in and fade out duration of the dialog in milliseconds.
Accepts a numerical value.
Default: 100

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    fadeTime: 200
    }
);

determines how long (in milliseconds) the inline-dialog will stay visible for until it is hidden (if no other trigger for hiding the dialog is fired) if null is passed auto-hide is disabled for this inline-Dialog
Accepts a Numerical value.
Default: 10000 (or null)

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    hideDelay: 3000
    }
);

determines how long in milliseconds after a show trigger is fired (such as a trigger click) until the dialog is shown.
Accepts a Numerical Value
Default: 0

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    showDelay: 200
    }
);

Sets how wide the inline-dialog is in pixels.
Accepts a Numerical value
Default: 300

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    width: 400
    }
);

Sets an offset distance of the inline-dialog from the trigger element along the x-axis in pixels
Accepts a Numerical Value or a function that takes the same arguments as calculatePositions and returns a numeric value.
Default: 0 for 'n' and 's' gravity; 10 for 'w' gravity

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    offsetX: 30
    }
);

Sets an offset distance of the inline-dialog from the trigger element along the y-axis in pixels
Accepts a Numerical Value or a function that takes the same arguments as calculatePositions and returns a numeric value.
Default: 10 for 'n' and 's' gravity; 0 for 'w' gravity

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    offsetY: 30
    }
);

The element in which the dialog itself will be appended.
Accepts a String or an element.
Default: "body"

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    container: "head"
    }
);

determines if the contents of the dialog are cached. If set to false the contents will be reloaded everytime the dialog is shown.
Options: true/false
Default: true

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    cacheContent: false
    }
);

a function that will be called after the popup has faded out.
Accepts a javascript function
Default: function(){}

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    hideCallback: function(){alert("Hello World");}
    }
);

a function that will be called after the popup contents have been loaded
Accepts a javascript function
Default: function(){}

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    initCallback: function(){alert("Hello World");}
    }
);

determines if the dialog should be shown relative to where the mouse is at the time of the event trigger (normally a click) if set to false the dialog will show aligned to the left of the trigger with the arrow showing at the center.
Options: true/false
Default: false

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {
    isRelativeToMouse:true
    }
);

determines if all other dialogs on the screen are closed when this one is opened
Options: true/false
Default: true

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {closeOthers:true}
);

a function that determines how the content retrieval response is handled, the default assumes that the data returned is html. The implemented function must handle the three variables: data, status, xhr and at the end return html
Accepts a javascript Function
Default: function(data, status, xhr) {
return data;
}

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    { 
    responseHandler: 
        function(data, status, xhr) { 
            return parseHTML(data);
        }
    }
);

determines if the dialog should be shown above the trigger or not. If this option is true but there is insufficient room above the trigger the inline-dialog will be flipped to display below it.
Deprecated in favour of gravity.
Options: true/false
Default: false

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {onTop:true}
);

As of 5.5: The preferred direction in which the inline dialog's arrow points, e.g., 'n' makes the inline dialog's arrow point up (with the inline dialog below the trigger). When there isn't enough room to display the inline dialog with its preferred gravity it automatically flips orientation.

AUI supports jQuery live events. If you choose this option, AUI will bind all events on the page to the HTML body element instead of to each individual element. This means that your events can be bound to all current elements and to elements that do not yet exist. You no longer need to rebind everything on an Ajax load. This is essential on a page which has, for example, a number of user avatars that react on hover. Binding can cause a performance problem when there is a large number of such elements. Disabled if noBind is true.
Options: true/false
Default: false

See AUI 3.1 Release Notes.

Instructs the InlineDialog on rendering the shadow.
Options: true/false
Default: true

See AUI 3.5 Release Notes

A function that returns a string representation of an SVG path that will represent the arrow being drawn. This function takes one argument, positions which is the return value of the calculatePositions method.

AJS.InlineDialog(AJS.$('#inlineDialog'),
    'myDialog',
    'dialog-content.html',
    {getArrowPath: function (positions) {
        return positions.displayAbove ?
            'M 0 0 L 0 0 0 8 8 8 8 0 0 0' :
            'M 0 0 L 0 0 0 8 8 8 8 0 0 0';
    }}
);

Returns an object which has attributes to be applied to the arrow svg element.

AJS.InlineDialog(AJS.$('#inlineDialog'),
                     'myDialog',
                     'dialog-content.html',
    {getArrowAttributes: function() {
            return {
                 fill: '#ff0000',
                 stroke: '#000000'
            };
        }
    }
);
                            

Instructs the InlineDialog to add the 'active' class.
Options: true/false
Default: true

AJS.InlineDialog(AJS.$('#inlineDialog'),
    'myDialog',
    'dialog-content.html',
    {addActiveClass: false}
);

Allows the consumer of InlineDialog to manually determine or calculate the position that the InlineDialog should be drawn at.

AJS.InlineDialog(AJS.$('#inlineDialog'),
    'myDialog',
    'dialog-content.html',
    {calculatePositions: function getPosition(popup, targetPosition, mousePosition, opts){
         return {
             displayAbove: true,
             popupCss: {
                 left: mousePosition.x,
                 top: mousePosition.y+20,
                 right: mousePosition.y+100
             },
             arrowCss: {
                 left: 20,
                 top: 0,
                 right: 20
             }
         };
    }}
);

As of 5.0; arrowOffsetX defines an X axis offset in pixels for placement of the arrow (default is zero).

Accepts a Numerical Value or a function that takes the same arguments as calculatePositions and returns a numeric value.

AJS.InlineDialog(AJS.$('#inlineDialog'),
    'myDialog',
    'dialog-content.html',
    {arrowOffsetX: 50}
);

As of 5.5; arrowOffsetY defines a Y axis offset in pixels for placement of the arrow (default is zero).

Accepts a Numerical Value or a function that takes the same arguments as calculatePositions and returns a numeric value.

AJS.InlineDialog(AJS.$('#inlineDialog'),
    'myDialog',
    'dialog-content.html',
    {arrowOffsetY: 50}
);

AJS.InlineDialog(
    AJS.$("#inlineDialog"), 
    "myDialog", 
    "dialog-content.html", 
    {persistent: true}
);