Drag any of these boxes anywhere on the screen, and then mouse into it to see
Bubble position and info for that box. To dismiss the bubble, click anywhere outside the
bubble or click the bubble's dismiss icon. The bubble will auto-dismiss 2 seconds
after moving the mouse off the bubble or the associated target.
Bubbles that have the "editable" option set to true will show an edit icon in the header.
When clicked, the bubble title and content will each display in a textarea for editting.
Clicking the icon when in edit mode will returns the bubble to normal mode with the changes
applied. Changes from edit mode can be cancelled by dismissing the bubble via the dismiss
icon or clicking anywhere outside the bubble. The bubble title is text-only, the content
can be HTML markup.
This bubble is specifically positioned via "style="top:55px; left:-5px; position:relative;"
to override the default positioning. When positioned in this manner, there will be no callout
arrows and no provisioning is made to ensure the bubble appears within the page boundaries.
This bubble shows the default positioning of the bubble.
The bubble will by default be positioned to the right and above the target.
If the bubble position will cause it to cross the right page boundary, then it is
repositioned to the left of the target.
If the bubble position will cause it to cross the top page boundary, then it is
repositioned below the target.
Parent container for the black square.
This bubble tests correct placement of a bubble for a target that itself is positioned
relative to it's parent container. The parent container is the black hollow square.