Fast and simple tooltips

Tips & Tricks
1

I recently posted a short video tutorial on my YouTube channel demonstrating a particularly fast and straightforward way to implement polished and standardized tooltips in Hype with minimal effort.

These tooltips:

  • take less than ten seconds to add
  • require no code or timelines
  • are self-scaling and self-centering
  • are animated by default
  • work on both desktop and mobile screens

This method utilizes custom attribute selectors entered via Hype’s identity inspector, so they are an ideal solution for non-coders.

You can find this video on my YouTube channel here: Fast & simple tooltips for Hype projects - YouTube

The code example mentioned in this video is:
CSS_Tooltips.hype.zip (132.5 KB)

IntroImage
IntroImage1920×1080 775 KB

9 Likes
2

Impressive this was done with just CSS!

It is a shame that browsers themselves don't support better tooltips, so great that you are filling in the gap with this.

2 Likes
3

Hei,
I really like your idea, since it could make it easier for our editors - who have a basic Hype knowledge, but don´t code - to handle tooltips. One thing - the tooltips seem not to work for groups or symbols (only the tootip´s body is visible, but not the text). Is there a way, to accomplish this?

4

Hype is forcing the font color of a group (and I presume symbols) to black. So if the tooltip has a black background then the text will be invisible.

So you have to change either the tooltip color or the text color.

I edited the original CSS to override Hype like this:

TextColorCSS
TextColorCSS1614×848 99.8 KB

and the tooltip text became visible again for grouped objects.

4 Likes
5

Ok, that´s fairly easy :grinning: Thanks for the quick reply!!