GWT - Popup Position

Question

How to put a popup in gwt at mouse position. I have a huge flextable and flextable contains a button. If a button is pressed, a popup window appears with some data, but a popup window always appears at the top of the page. if the user is at the bottom of the table, does the popup exit the view and cannot see it?

How to get x and y coordinates of mouse position?

Answer 1

To show the popup, use the center() method instead of the show() method. This should create a popup and display it in the center of the browser window.

Answer 2

The showRelativeTo method of the PopupPanel class works well in my use case.

 import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.PopupPanel.PositionCallback; public class CommentPanelPopupImage extends Image { public CommentPanelPopupImage(final int tableId, final String referenceId, final String title) { super("external-link-ltr-icon.png"); setTitle("Click to see comments"); final CommentPanelPopupImage commentPanelPopupImage = this; addClickHandler(new ClickHandler() { public void onClick(final ClickEvent event) { final CommentPopupPanel popup = new CommentPopupPanel(tableId, referenceId, title); popup.setPopupPositionAndShow(new PositionCallback() { public void setPosition(int offsetWidth, int offsetHeight) { popup.showRelativeTo(commentPanelPopupImage); } }); } }); } } 

Answer 3

To get the position of the mouse, you can use getClientX / Y () or getScreenX / Y () from the event that was passed to the event handler function.

Answer 4

In the main panel, add this and save the coordinates in the global vars object as static (?)

 main_verticalPanel.addDomHandler(new MouseMoveHandler() { @Override public void onMouseMove(MouseMoveEvent event) { GlobalVars.mouseX = event.getX(); GlobalVars.mouseY = event.getY(); } }, MouseMoveEvent.getType()); 

Then get the coordinates from another place in your code.