Callout

updateLayout can be called to force the callout to recompute its position and location if it is using a relative layout. This means that contentLocation was not specified, and instead an element or point was used to position it.

If the callout is being positioned relative to an existing element in the DOM the relative element should be supplied as the anchorElement. (anchorOrigin should be supplied with anchorElement)

anchorOffset is used to shift the location of the callout from the defined location by a fixed amount. An example might be the tooltip callout defaults to an anchorOffset of { x: 8 y: 8 } from the mouse position.

When an anchorElement is supplied the anchorOrigin is used to describe the relative location of the callout with respect to the anchorElement. A common example here is a dropdown button aligns the callout to the bottom-right of the button.

Instead of using an anchorElement to position the callout, if can be positioned based on a fixed location. The anchorPoint defines the fixed position for the anchor.

Id of another element which describes this one for screen reader users.

ariaLabel allows the root element to describe the elements contents to assistive technology.

Id of another element which labels this one for screen reader users. Defaults to this checkbox's label element.

This will dismiss the callout once it gets and then loses focus. Callouts should dismiss when they lose focus unless they are intended to be modeless UI.

calloutOrigin works in conjunction with the other position styles; anchorElement, anchorOffset, anchorOrigin, anchorPoint. After determining the location based on the anchor properties the position of the callout is applied. Example: Again the DropDownButton uses anchorOrigin -> Bottom, right with no offset. This means the anchorPoint will be the bottom right of the button. The calloutOrigin is defined as top, right. This will position the top, right corner of the callout on the bottom right of the button.

Optional CSS className to apply to the callout element.

Optional CSS className to apply to the content element of the callout.

Justification of the callout content within the callout. This defaults to auto layout and will take on the content size. This ONLY applies to window relative layouts, use contentLocation to use this.

This needs to be supplied for a window relative layout. Otherwise the anchorElement is used as the location basis.

Orientation of the callout, is this a column or a row. This ONLY applies to window relative layouts, use contentLocation to use this.

Optional ref to be passed to the top level callout element.

Should the callout have the standard callout shadow.

If supplied there are a set of well-known fixed size callout's designed to keep things like panels and other types of information using a consistent layout. This ONLY applies to window relative layouts, use contentLocation to use this. This should be supplied when you are following a standard UI model size.

The callout will handle keyboard events and when the escape key is pressed the callout will close if the the event hasnt had the defaultPrevented.

fixedLayout is used to determine whether or not the callout should be moved based on visibility. if fixedLayout is set to true the callout wont be moved.

focuszoneProps allows the caller to manage the how the elements in the callout content are rendered.

Optional height to use for a custom size.

If the id supplied, this id will be added to the callout element as the DOM id attribute.

The callout element will trap mouse events and dismiss the callout when a click occurs. This will prevent the events from being handled by the underlying elements outside the callout's contents.

The callout element will be given a class that is a semi-transparency that helps the user understand the user should focus on the callout and dismiss it before interacting with the underlying document.

Callback for when an animation on the Callout element ends. Useful when the callout hide/show is animated and the caller wants to know when it completes.

Method that is called when the callout is dismissed.

Callback for when a key is pressed down.

Callback for when the mouse enters the callout.

Callback for when the mouse leaves the callout.

The portalProps allow the caller to control how the Callout's portal are configured. The default will create the portal as a full screen element rooted in the body.

role is used to define the assistive usage of this callout. The default is "dialog", but can be overriden with this property.

If updateLayout is set to true, the component is re-laid out each time new props are passed in. If not the callout's layout is not updated.

This will dismiss the callout if viewport changes such as a scroll or a resize

Optional width to use for a custom size.