Notifications @ MousePointer

Support
#1

We have a map with GeoPoints. If the user clicks on a point we want to show a notification exactly at that point where he did click. As Notification is not supporting this, we try to move a dialog with JS.

Dialog dialog = new Dialog();
dialog.setHeaderTitle(event.getItem().getCompany());

dialog.open();
dialog.setId("address-dialog");

// Use JS to move dialog to (x, y) coordinates, where x/y are from the mouse event
UI.getCurrent().getPage().executeJs(
	"var dlg = document.querySelector('vaadin-dialog[opened]'); " +
	"if (dlg) { dlg.$.overlay.style.position = 'fixed'; dlg.$.overlay.style.left = $0+'px'; dlg.$.overlay.style.top = $1+'px'; }", event.getMouseEventDetails().getPageX(), event.getMouseEventDetails().getPageY()
);

But with var dlg = document.querySelector('vaadin-dialog[opened]'); we don’t get the dialog.

Any idea how to address this dialog ?

Regards

Felix

#3

Hi Felix,

Try to set:

dialog.setLeft(event.getMouseEventDetails().getPageX() + "px");
dialog.setTop(event.getMouseEventDetails().getPageY() + "px");

If you want to center it along the X-axis, you should decrease the left position by half the width of the dialog

1 Like