Show list on onhover event of textbox

Show list on onhover event of textbox

  

Hello,

I am missing something.

My requirement is that when user hovers mouse on textbox, I want to show recently visited projects. I have aggregate for that but not getting how to show list onhover of text box.

Please advice.

Thanks and Regards,

Suraj Borade

Hi Suraj,

You can call the javascript function on mouse hover event of the textbox in extend property and click the button to call pop-up.

Regards,

Manish Jawla

Hi Manish

Thanks for the reply.

I don't want to open popup.

I just want to show around 10 projects as a list below text box when user hovers mouse on it.

Hi Suraj,

then you can take a list widget bind your aggregate to it inside container and hide and show the container on the text hover event of the textbox.

Regards,

Manish Jawla

Yes, like Manish says, I'd always render the listbox but with a class that's hidden by default, encapsulate the text + listbox container in a container with another class and have CSS to hide by default but parentClass:hover childclass { display: inline } etc.

Why not simply use extended-property "title" on that textbox with the list as a string?



Hi J. I would say that probably the requirement also says that the user can choose one of those options, instead of having to type it.

Actually, this makes sense. 

When the user hovers over the input, it shows a list, and the user can pick. Or it can type in the input, and it can also use here an Auto Complete so that the user doesn't have to type everything.

Of course, in this case, on receiving the focus, the list with the last visited projects should disappear.

Cheers,
Eduardo Jauch

Well, if the requirement is that the user can chose, then it's not an onhover is it? Because as soon as the hover is done, the list disappears again!

Kilian Hekhuis wrote:

Well, if the requirement is that the user can chose, then it's not an onhover is it? Because as soon as the hover is done, the list disappears again!

Hi Kilian,

Sorry, I was not "thinking" to use the hover in the input (but I said it :( lol), but over a container that holds both elements (the div and the list).

An example:

https://eduardojauch.outsystemscloud.com/TestsForForum/?_ts=636396874667871020

I used a div around the input and the list, and used this CSS:

SyntaxEditor Code Snippet

.List {
    display: none;
}

.outerdiv:hover .List {
    display: block;
}

Cheers,

Eduardo Jauch

Eduardo,

Ok, that explains. Btw, your test is behind a login :).

Kilian Hekhuis wrote:

Eduardo,

Ok, that explains. Btw, your test is behind a login :).

Oh man... lol
Sorry. Fixed.

Cheers,
Eduardo Jauch

EDIT.
In the end, all I did was to implement your previous suggestion.

Hi All,

Nice discussions.

Let me make it more clear. There will be text box in header section. When user hovers mouse on textbox, it will show recently visited projects (around 10) of users and user will be able to click on any project. If user takes mouse out of textbox, list should be disappeared.

Next thing is, if user clicks or type in textbox, it will show all the projects in autocomplete list and user would be able to select from auto complete list.


Hi Eduardo,

Can you please share sample code used here 

https://eduardojauch.outsystemscloud.com/TestsForForum/?_ts=636396874667871020

I have implemented the same but it's increasing the width of my header.

Thanks

Eduardo Jauch wrote:

Hi J. I would say that probably the requirement also says that the user can choose one of those options, instead of having to type it.

Actually, this makes sense. 

When the user hovers over the input, it shows a list, and the user can pick. Or it can type in the input, and it can also use here an Auto Complete so that the user doesn't have to type everything.

Of course, in this case, on receiving the focus, the list with the last visited projects should disappear.

Cheers,
Eduardo Jauch

tbh, it doesn't make sense at all. 

first of all, he doesn't say that.

second, I have no idea if it should work on mobile as well.

third, if the user does not use a mouse, but simply tabs between inputs, what then?


onhover and then selecting is a horrible ux-design imho for inputs.

for menu's i can agree, but then it's not an textbox, but lists...

Hi Suraje, 

Yes, of course. It is attached.
it is just an implementation of Kilian's idea. You probably will have to adapt to your needs.

Cheers,
Eduardo Jauch

Hello J. 

How are you?

To me, makes sense as an accelerator. The user can chose from a list of "most used", or type and chose another project. 

You are right he didn't say that at first, but his question lead me to believe that was what he was asking.

About mobile, we can test it, but I don't expect to find in a mobile application (thinking in mobile applications) all the features of a web application in a Desktop, and vice versa. It is (still) very common in mobile to have access only to a sub group of the features of an application. AND to have features not available in desktop (web application).

If the user just tab between the inputs, and the list doesn't show, what the problem? The requirement was that when the user hover over the input, it shows the list. Even more because as I expected, the requirement also wants to have auto complete. 

I'm not expert in UX design, and so I don't have arguments to say a onhover+select is a horrible UX design. Just that it does not seems horrible to me. I may be wrong and the experts have lots of arguments against it. If they exist, I would like to learn them. 

Cheers,
Eduardo Jauch

Hi Eduardo,


I am fine, thanks.

I stopped "believing what he/she is asking", because that is making software people may well/not want and thus delivering stuff people don't want. (assumptions is the mother of all f-ups :) )  I try answer the question plain and simple (without hidden assumptions). sometimes I actually go overboard by asking why, because people tend to aks for a solution while the original requirement could be solved in a whole different way, so the question asked becomes invalid.


anyways,

I am no expert as well, but have some experience and logical thinking about it.

My train of thought:


- When you hover over it you see 10 projects, when you click on it, it will select that project. Chances are, the textbox gets the focus, thus you get an onclick event which will popup a new list because of the autocomplete.

- When you hover over it, again you see 10 projects, when you click on the textbox, hover will hide, but a new list will show with autocomplete.


I find this confusing, because it's double almost-same functionality.

Granted, perhaps it's a dutch thing, but I would never expect a list popping up when hovering over a textbox.



Agreed with J.


Hi J. :)

While I agree and disagree with you, this topic is probably the wrong place to us to discuss this.
So, let's avoid discussing here (even if I think it is a good discussion and we could have it in a more appropriated topic).

Cheers,
Eduardo Jauch