How to make a tooltip?

I tried to find a solution for my problem in the documentation and in the forum, but I failed.

I just want to realize a simple thing. When I hover an rectangle, I want a circle to be displayed.
I tried to make it happen with “mouse over” and starting a timeline, but when I go off the rectangle, the circle stays in place.

In my first timetable an animation is going on, so I’m not able to just start this timeline. How to solve this?

You need to trigger the reverse of what you did on Mouse Over, in the On Mouse Out event. So attach “Start Timeline” and check “Play Timeline In Reverse” in the On Mouse Out event.

1 Like

Sadly, it doesn’t disappear :frowning:

What’s happening in your timeline?

After redoing it in a seperate file, I noticed that my problem was caused by browser cache.
Thanks for your help Lucas!

Hi to All!

There’s another solution that I find very handy that does not utilize a timeline. Please see the attached JPEG “ToolTipDemo.jpg” for reference with the steps below. Also have attached a demo Hype file (“ToolTipDemo.hype.zip”).

• Make sure "Show Button Controls” are active > “Edit” menu.
• Copy the Circle.
• Double-click the Rectangle.
• Select the “Hover” button that appears.
• Click the small innerHTML edit button that appears just below the rectangle.
• Select in the innerHTML box and paste the Circle - the code for the circle goes in the innerHTML.
• Adjust this code so the circle appears where You want it.

Addendum: Just noticed the FireFox transform code did not make it to the party (copying the Circle in Hype). so You would need to add the mozilla prefix >"-moz-transform: translateX(0px) translateY(-120px) rotateY(0deg);" to the code. Chrome (also “-webkit”) & Opera work fine. Have not tried IE.


@Daniel is this no “-moz” prefix standard? I can’t get it to show in some other copy & pastes I’ve tried.

ToolTipDemo.hype.zip (22.7 KB)

2 Likes

Time ago I made this example with an image but you can use any object

Hi to All!

Another variation on a theme, and my main use of the Button Control~Hover technique… © Symbols - or other discrete text expressions on a web page, and a fast tool tip creation process.

When using a text box with the © symbol and displaying the artist~author credit “on mouse over” (or other event) there is no copy~pasting needed (as in my “Circle” & “Rectangle” demo above). The “normal” state is the copyright symbol © - sized accordingly. Select the “Hover” state button then simply stretch the text box to the needed size and enter in the credit. Because we have not created a unique “hover” entity - rather just moved the text box (+ new background color & opacity) and entered new text - the “normal” state disappears. So placing the newly adjusted text box border or corner slightly over the “original” © location gives the illusion of the tool tip pop-up. Please see attached video “TextToolTip.m4v” for a demo of this effect.