Download This Plugin
Back To jQueryScript.Net

jQuery Bubble Plugin Examples

Drag any of these boxes anywhere on the screen, and then mouse into it to see Bubble position and info for that box.

Specific Positioning

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.

Bubble repositions to opposite side on browser 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.

Relatively-positioned Target

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.