The Callout extension

Callout is an extension class, which is a CSS styleable floating callout container with an optional arrow, developed by John Yanarella. It is useful for creating hint overlays and interactive callout windows/popovers.

We can see a callout popover in the following screenshot:

An Ext.ux.callout.Callout extension can be easily configured to:

• Show its associated callout arrow at various locations, including top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom

• Position itself relative to a target Ext.Element or Ext.Component, and it will maintain that relative position when that target moves or the browser resizes

• Automatically hides itself in response to mouse clicks outside the callout bounds

• Automatically dismisses itself after a configurable delay

• Fade in when shown, and fade out when hidden

A live demo is available for this extension at http://lab.codecatalyst.com/Ext.ux.callout.Callout. This extension is...