1

I'm aware there are many rich tooltip plugins and scripts floating about github etc. but I decided to make my own for educational reasons. I'm fairly happy with where the code is now and have been inviting some users to try it out.

The tooltips will follow the cursor unless the user clicks to "lock" the tooltip where it is, allowing the cursor to then interact with the contents of the tooltip, be it a link or an image with a zoom function, or anything else.

enter image description here

I have found that a majority of users have found it easy to use and understand, and have indeed enjoyed using these tooltips. However in more than half of cases the user has not worked out that they can click to lock the tooltip without being instructed.

How can I make it more obvious without explanation that the tooltip will lock position once the user clicks?

I have considered changing the cursor, but that would not make sense as the default cursor generally relates to being over something clickable, and the user may hover the cursor over something else on the parent that requires a different cursor.

I also thought of some very small text "click to lock" on the tooltip itself, but the main problem that is obvious to me is that to be small enough to not intrude and overwhelm the tooltip itself, the text would need to be very small to the point of probably being unreadable. Secondary to that, I can't think of any wording that would suitably convey that it's not the tooltip itself that needs clicked on, which would be impossible since it follows the cursor! I don't want to confuse people any further.

There is a working example of this if you want to see it in action for yourself here http://fbvm.co.uk/tooltip
Also the code is on codereview.SE here https://codereview.stackexchange.com/questions/159017/javascript-jquery-tooltip-management/159023

I'm aware this is borderline cross-posting, but I believe the questions are sufficiently different. If you disagree please assist me in improving or altering this question.

1 Answer 1

2

This is tricky because you're creating a mismatch between what users are generally accustomed to and what they are getting with your prototype.

Standard pop-ups are historically extremely "low touch" elements in terms of interaction. They come and go on their own, just one at a time, usually with carefully tuned and dynamic delay and fade, peppering the users' content with a bit of extra contextual information that may or not be useful. In the users' mental model, they typically exist on their own "layer", totally separate from content or other UI. They are very easy to ignore, and that gives them a very low "mental profile" in regards to how conscious a user must be of them. And a big part of that is because, with very few exceptions, they never require or even invite clicking.

You are essentially making a hybrid element: It looks like a balloon style pop-up, but it works like a set of flyout/expanding elements which you click to expand/collapse individually. That's going to be a challenge because you're swimming against the tide of current everyday experience, and asking your users to do the same.

Also, your current design requires manual opening and closing of each one, which is a little cumbersome for a tooltip. When multiple bubbles are opened at once they overlap each other and also perhaps more critically, begin to obscure the underlying primary information they are "popping up about". I've found that these issues must be addressed and solved in order to make a custom pop-up int a workable and scalable solution.

Generally speaking, adding interaction affordance where users are (as opposed to making them go to it) is a solidly good approach to solving UI problems. And pop-ups, due to how they they appear near the cursor's existing position wherever that may be on invocation, offer a lot of potential to do just that.

Also, one of the nice things about moving interaction into pop-ups is that they can allow for less modal-ness in your interfaces. I.e. with pop-ups a user doesn't have to do as much in the way of manually opening+closing+moving UI around all the time. It gets invoked, it pops up, transacts with user, and goes away. Bing Bang Boom. They are great for quick in and out transactions... The more automatic, the better.

Also, I certainly don't want to discourage you from making UI elements that work in novel ways, (Innovation is good! And needed!) but in my experience you have to be careful with how you present it. If it functions differently than what people already know, it will very often (but not always!) have to look different than what they already know as well.

I agree that your problem is likely not best solved with explanatory text.

I think you need to really ask if what you want is an informational tooltip, or more of a complex pop-up dialog. If it's tooltip, I'd keep it conventional. Maybe in your case a more conventional expanding panel-style element would be better? If you're set on having multiple simultaneous open with full manual stickyness, maybe just making them look more like those elements do is where you want to explore? I think perhaps that depends a lot on how much you plan to add in terms of complexity beyond just a hyper link.

If you're set on the pop-up and the benefits they offer, perhaps you might try animation as a cue to your users that "Hey, this thing is a little different than what you've used before!" This can be change in motion or transparency or color, etc. Or perhaps combinations of the above?

Or another approach may be to do "staged promotions". I.e. A user hovers or selects a thing, they get a stationary tooltip off their cursor, and if they subsequently hover over the tooltop, its frame turns from a bubble to a rectangle with a tiny pushpin icon to denote stickyness. If said icon is clicked, bubble becomes sticky. If not, bubble keeps being a tooltip and if the mouse moves on without clicking it goes away on its own. This also separates mouse interactions with the pop-up from those with the underlying widget, allowing the widget to keep accepting clicks for itself. This is inevitably something you will need to provide for as you deploy an element like this more fully.

One example worth thinking about is the "fading context toolbar" in Microsoft Office. When you select something, a faded icon appears near the cursor. It's generally unobtrusive, but as you move near it, it starts to fade in/out with distance. When you hover right over it, it pops up with context-driven options, which in that case is a mini toolbar and menu. Users can adjust things directly. It goes away on its own if the user moves away or interacts with it and then moves on to something else. They managed to stuff a ton of stuff in there, all very, very close to the cursor at all times. But you'll notice that how it appears and fades in/out is very carefully tuned. There's more state complexity to it than is apparent on the surface. But it works I think because it is still fast and automatic, and looks just different enough (and just the same enough) not to confound expectations. Also, no extra clicks to manage it, which is always very, very welcome in HCI systems.

Anyway, this is getting verbose. I've found that designing with pop-ups to be extremely challenging but yet also very rewarding. I hope some of this may be informative if not useful. Cheers!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.