0

[Solved] Dynamic Popup Positition

asked 2014-03-11 09:33:32 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2014-03-11 15:23:55 +0800

Hi,

I'm generating a popup and assign it to an image.

Image image = new Image();
Popup popup = new Popup();
image.setTooltip(popup);

The problem is that the popup is displayed default "atpointer" (http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Patterns/Tooltips,_Context_Menus_and_Popups (Source)), so I can't click on the image which forwards me to another ZUL-Page. I want to change the position to "afterpointer", so I can see the tooltip, but nevertheless can click on the image.

How to I specify the position in JAVA code of a popup?

delete flag offensive retag edit

7 Answers

Sort by ยป oldest newest most voted
1

answered 2014-03-12 01:09:49 +0800

cor3000 gravatar image cor3000
4571 2 7
ZK Team

updated 2014-03-12 01:15:50 +0800

You can also set the position using the method XulElement#setTooltip(String) like in this small example I created on ZK fiddle.

Also read the API docs on the setTooltip method for additional options.

Robert

link publish delete flag offensive edit

Comments

that's a wonderfull fiddle. and thx

chillworld ( 2014-03-12 04:20:59 +0800 )edit

Thank you, this is far more elegant!

IngoB ( 2014-03-12 07:42:16 +0800 )edit

I should keep the eventlistener onMouseOver and set the tooltip there lik ecor said. It will load page faster (if you have a lot of pics remember each pic will construct the tooltip and are you sure that each tooltip is used?) and you have more a load on demand.

chillworld ( 2014-03-12 08:39:42 +0800 )edit
0

answered 2014-03-11 12:17:59 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9
https://github.com/chillw...

The method Popup.open(Component, String) is used to specify the position of a popup component. The function's second argument takes a relative position, a list of 14 possible positions are provided below.

so do this :

Image image = new Image();
Popup popup = new Popup();
popup.open(image, "after_pointer");

greetz chill.

link publish delete flag offensive edit
0

answered 2014-03-11 12:39:48 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2014-03-11 12:42:40 +0800

Thanks. Do i have to set an Eventlistener "onMouseOver"&"onMouseOut" at the image call "popup.open(image, "after_pointer");"? Because "image.setPopup" already shows/hides the tooltip on "onMouseOver" (but without position).

link publish delete flag offensive edit

Comments

If you show it there, didn't you try to set the position there? normally that would work also.

chillworld ( 2014-03-11 12:51:07 +0800 )edit
0

answered 2014-03-11 13:28:11 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2014-03-11 13:32:51 +0800

At the moment I'm only assigning the dynamically created popup to the image.

Image image = new Image();
Popup popup = new Popup();
image.setTooltip(popup);

Thats all and its working. But if i use, as you suggested, "popup.open" then I'll have to set a EventListener or am I missing something?

Image image = new Image();
Popup popup = new Popup();
image.addEventListener(Events.ON_MOUSE_OVER, myPopupOpenListener);

...

myPopupOpenListener -> "popup.open(image, "after_pointer");"
link publish delete flag offensive edit
0

answered 2014-03-11 13:46:24 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9
https://github.com/chillw...

I think your missing something :

<popup id="thePopup" width="100px" height="100px">
    <label value="I am a popup." />
</popup>
<window border="normal" title="Tooltip popup hides context">
<listbox height="300px">
      <listitem label="The listitem" tooltip="thePopup, position=after_pointer" />
    </listbox>
</window>

and in your code you just change your thePopup.

Greetz chill.

link publish delete flag offensive edit
0

answered 2014-03-11 14:10:59 +0800

IngoB gravatar image IngoB flag of Germany
256 6

Mhh...

<listitem label="The listitem" tooltip="thePopup, position=after_pointer" />

so

image.setTooltip(popup);

does

<image tooltip="popup"/>

but how do I dynamically add the position? like

image.setTooltip(popup +",position=after_pointer")

I generate about 100x Images & Tooltips, so I have to do it in JAVA not in ZUL.

link publish delete flag offensive edit

Comments

mhh I think the only way is the eventlistener then, little dirty way to accomplish it, but strange you just can't change the position already before you open it....

chillworld ( 2014-03-11 14:22:16 +0800 )edit
0

answered 2014-03-11 14:51:14 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2014-03-11 14:55:06 +0800

Thank you for your help :)

I "solved" it with a Eventlistener and its working, but kinda ugly :x

image.addEventListener(Events.ON_MOUSE_OVER, new EventListener<Event>() {
            @Override
            public void onEvent(Event event) {
                popup.open(image, "after_pointer");
            }
        });

image.addEventListener(Events.ON_MOUSE_OUT, new EventListener<Event>() {
            @Override
            public void onEvent(Event event) {
                popup.close();
            }
        });
link publish delete flag offensive edit

Comments

Nice that it works.

chillworld ( 2014-03-11 15:10:30 +0800 )edit

thanks chill for being active once again!

cor3000 ( 2014-03-12 01:16:26 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-03-11 09:33:32 +0800

Seen: 41 times

Last updated: Mar 12 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More