Info balloon in IE 11

Info balloon in IE 11

  

I need to set a search box when we click in the funnel-shape filter icon... I have chosen to use the info balloon... nevertheless when I try to hover with mouse on the icon it does not appear the infoballoon. I have set the method of the link to the popup webscreen as NAVIGATE. 

Is there a better approach instead of using an infoballoon? I think using a infopup will be much better so I have tried it... but How could I set the infopup to be close to the icon and not centered in the middle of the page? Is there a way to close the infopopup when someone click outside of the search box? (I have set a cancel button and it works fine but this last feature would be nice to have). 

Thanks!



Hi Jorge,

An popup info ballon will show on mouse hover and disappear when the mouse is no longer hovering over the popup... if you want it to stay there until you click somewhere else, you will have to clone it and modify it's behaviour (and that means JavaScript/jQuery)

Instead of a full-blown popup you could simply have a container that you show/hide based on a condition. If you want to still have the "feel" of a popup, you could also consider, as an alternative, using CSS positioning to set up the location of your container relative to the filter icon.

Hi Jorge,


I have chosen to use the popup which I could set easily the size I wish. The problem is the fact there are 7 columns, each requiring the same search box. I have used an input parameter to convey the information to be searched (e.g. column of name will deliver the "name" input so I can use a switch (we are using only one popup) Now the problem is: we would need to set the right position for each icon using the same popup... 

with the container idea... 

style=
    "position: relative;   left: 100px; top: 35px; border: 1px solid #B22222;"

it only appears one line... and not the box. the position seems ok. 


EDIT; I forgot to set the height. Now I think using the containers it is better because I can set the position easier than using only one popup. (i will need 5  containers)


I have created a local variable set to false to hide the container. I have created 5 local variables set by default to false.. then when an user clicks in the icon , the local variable turns out true and the container appears.  would be there a better way to prevent the use of 5 local variables?

Why not having a single numeric variable that indicates the index (1-based) of the column that should show the search "popup"? Your containers would be visible when the variable holds their index, and hiding all would be as simple as assigning 0 to it (because it is 1-based).

How's that?

i have used the following code for CSS in the containter:


SyntaxEditor Code Snippet

"position:relative; left: 80px; top: 90px; border: 1px solid #606060; height: 80px; padding:5px; background-color:#ffffff; width:300px;"


YOU CAN see when i click in the icon close to evento, the table goes down (SEE "after" image)... dunno why! 

BEFORE:

AFTER:



in the before scenario it ensues this CSS. THE ONLY DIFFERENCE seems to be the display:none; but this was not set in the code... if i take off the container the table comes next t the title.. so it is about CSS.. need help here...


display:none is most likely a consequence of you using the Display property of a container to show/hide it. wouldn't affect the extra empty space.

You'll need to "explore" the rest of the elements in place and check their CSS to understand what might be going on... with only that screenshot it's going to be hard for anyone to help you out.

If I delete the container the top of the table records goes close to the title... Tomorrow I'll copy the full css for this part because I want to know where is the issue.