justinmind-logo
 
Upvote 1

How to to delay the appearance of tooltips (so that they appear on mouseover + a delay)

Completed Dave 9 years ago

"Well-behaved" tooltips don't pop up the instant the user mouses over the trigger, but only after the user leaves the mouse pointer in place for a specific delay.


Using the Sawicki Indirection Technique (named for its creator, fellow JustinMind user Maciej Sawicki), I have implemented this delay in JustinMind Prototyper.


Create the trigger component. This can be pretty much anything. In my app, it's a FontAwesome "fa-info-circle": .


Create your tooltip however you prefer: I use the "Callout" widget for a "talk bubble" style, or a plain old rectangle or label.


Create two text inputs. I set mine 100% transparent, because they're not going to be used as input, but to trigger events when they receive focus. They may be Editable, or not, but they must not be hidden.


Add an "on Mouse Over" event to the trigger component, consisting of three actions:• Pause: 750 milliseconds


• Set Value of a variable "tt_ready" to "true"


"tt_ready" default value = "false"


• Set Focus on one of the inputs


Add an "on Mouse Leave" event to the trigger component, consisting of two actions:• Set Focus on the other input


• Set Value of a variable "tt_ready" to "false"


Add an "on Focus In" event to the first input, consisting of one action:• [Conditional: When "tt_ready"] Show the tooltip.


Add an "on Focus In" event to the second input, consisting of two actions:• Set Value of a variable "tt_ready" to "false"


(important: if you use an effect to hide the tooltip,


this prevents rollovers from triggering the effect.)


Show the tooltip.


The variable "tt_ready" prevents the tooltip from appearing when the user merely glides over the component without pausing for 750ms. It is set on Mouse Over, and the timer starts running, but is cleared on Mouse Leave, so when the Focus In event reaches the first input, "tt_ready" is false, and the tooltip does not appear.


It works like a dream.


Thanks again to Maciej Sawicki for the idea of using "on Focus In" events as a kind of "subroutine" for indirectly triggering events.

Replies (6)
photo
1

Credit also should go to Mogarick, who posted this months ago before me.


https://www.justinmind.com/community...

photo
1

Dave, interestingly this could be done without complicated "focus in" technique.


You can simply divide actions for Mouse Enter and Mouse Leave and set proper conditions. For me it's much simpler and more flexible.


Take a look at this file


https://dl.dropboxusercontent.com/u/2...


080dcff3de847b91563bc5513070a299

photo
1

Thanks! As they say, "to a man with a hammer, everything is a nail."

photo
1

Hello,


Thank you for the credit!


I'm glad the workaround I proposed has been useful. But at the same time I'm sad because it looks JIM has not implemented a real solution even though it's been about 4 years since Rousell Huston suggested and almost 2 years since I posted the work around.


It would be great to get official word of JIM about why this feature has been relegated for so long.

photo
1

What does it mean that my idea is "Completed?"


Did you add or update something in the product that implements the idea as initially suggested 5 years ago by Rousell Huston, or turned into a practical technique 3 years ago by Mogarick, or updated 2 years ago by Maciej Sawicki, or documented in this idea a year ago by me?

Or are you must closing it?

photo
1

New Justinmind user here.....but I think there is a workable solution to handle this type of interaction.

When adding your "mouse enter" event, choose "Pause" from the action dropdown. Here you can define your desired delay. Then add a second "mouse enter" event to "show" the tooltip, which follows the one you just created with "Pause"

Leave a Comment
 
Attach a file