PopTable is a powerful replacement for Window, Dialog, and TextToolTip. It is implemented by many of the widgets found in Stripe. Using one is as simple as using a normal table, yet it can do wonderful things like automatically attaching to another actor, highlighting an actor for tutorials, and automatically resizing/repositioning based on the stage's bounds.

PopTableStyle only has two optional values:

background is a drawable that will be set as the background of the table. If you're using PopTable like a dialog, this would be the window graphic.

stageBackground is a drawable that is added to the Stage directly behind the PopTable. A partially transparent image is great for modal dialogs and when you use the actorHighlight feature for tutorial screens.

You can use PopTable without a style which will mean that the contents will float above the rest of your document.

The PopTable suite consists of the base class PopTable and the listener classes PopTableClickListener/PopTableHoverListener.

After you have created a PopTableStyle or attached it to a Skin, create a PopTable just like you would for any other widget:

PopTable popTable = new PopTable(style);

PopTables, however, should not be added to a layout. They can be added to the stage by calling show():

popTable.show(stage);

The above will add the PopTable to the stage and fade it in through Scene2D actions. If you want to provide a different Action, call the overloaded method:

popTable.show(stage, Actions.sequence(Actions.movetoAligned(0, stage.getHeight / 2, Align.right), Actions.moveToAligned(stage.getWidth / 2, stage.getHeight / 2, Align.center)));

The power of PopTable lies in the methods you can call on it to make it behave in various ways.

Once a PopTable is added to the stage, it can be freely positioned with setPosition(x,y) and related methods. If you want to align the table to the position of another actor added to the stage, use attachToActor(actor, edge, alignment, offsetX, offsetY)
edge is an integer from the Align class. This determines the side of the target actor that the table will be attached to.
alignment is an integer from the Align class. This determines the alignment of the PopTable in relation to the selected edge of the target actor.
For instance, an edge set to Align.bottomRight and an alignment set to Align.topLeft will appear like this:

An edge set to Align.top and an alignment set to Align.center will appear like this:

You can further modify the placement of the table by changing the offsetX and offsetY:

Once a PopTable is attached to an actor, it will follow that actor as it moves across the stage and when the viewport is resized. To stop this auto-alignment, call removeAttachToActor()

Besides changing the position of the PopTable manually, you can allow the user to drag it with setDraggable(true). It will follow the movements of the mouse as long as the user is dragging directly on the table and no child widget is capturing the input.

The user may drag it out of the stage. To move it back in, call moveToInsideStage(). It will move back to the closest edge.

Perhaps you want to prevent it from leaving the stage at all. To do that, call setKeepSizedWithinStage(true). That will prevent the table from being moved or resized beyond the edges of the stage.

If you just want the table to be centered in the middle of the stage at all times, call setKeepCenteredInWindow(true).

The PopTable automatically resizes itself as new widgets are added to its layout. You may want to turn this off if you want to maintain a specific size: setAutomaticallyResized(false)

If you are using the PopTable like a dialog window, a trendy thing to do is to hide the table when the user clicks away from it. Call setHideOnUnfocus(true).

In that same regard, you may want to prevent the user from interacting with anything outside of the PopTable until it's completely hidden. Call setModal(true).

A great way to use a PopTable is to implement it as a tutorial pop up. Often these popups will need to highlight a part of the interface or game area. Ensure that your style uses a background drawable then use setHighlightActor(highlightActor). If you want to dimly highlight the Actor, change the highlight alpha: setHighlightAlpha(highlightAlpha)

For convenience, you can attach a KeyListener to the PopTable to capture key presses. This is a convenient way to hide the table when "escape" is pressed.

popTable.key(Keys.ESCAPE, () -> popTable.hide());

When you are done with a PopTable and want to hide it, call popTable.hide()

The above code will fade out the PopTable and remove it from the Stage. If you want to use a different Scene2D action, use the overloaded method:

popTable.hide(stage, Actions.moveToAligned(0, popTable.getY(), Align.right));

A PopTable can be attached to an actor and be shown when the user clicks on it. To do this, simply create a PopTableClickListener and add it as a listener.

PopTableClickListener listener = new PopTableClickListener(Align.right, Align.left, popTableStyle);
someActor.addListener(listener);

Add whatever widgets you desire to the PopTable.

PopTable popTable = listener.getPopTable();
popTable.add(someWidget)

A PopTable can be attached to an actor and be shown when the user hovers over it. To do this, simply create a PopTableHoverListener and add it as a listener.

PopTableHoverListener listener = new PopTableHoverListener(Align.right, Align.left, popTableStyle);
someActor.addListener(listener);

Add whatever widgets you desire to the PopTable.

PopTable popTable = listener.getPopTable();
popTable.add(someWidget)