New Extension Suggestion - Tooltip

Extensions
, ,
1

Hello all, I have a new component suggestion for MIT App Inventor.

Name: Tooltip

Use
To show Material tooltips for existing visible components in App inventor.

Example Component Image

image
image722×237 8.05 KB

Example Void Blocks

void Tooltip1.ShowTooltip(
  String message,
  Component component
);

image
image958×290 42.2 KB 

void Tooltip1.Hide();

image

Example Designer Blocks
Tooltip1.BackgroundColor = Colors.red; in color
Tooltip1.TextColor = Colors.black; in color
Tooltip1.TextPadding = 5; in pixels
Tooltip1.Height = 25; in pixels
Tooltip1.Duration = 3; in seconds

Use
I thought this component will be useful for people who have difficulty understanding the icons developer uses.

Thank you :smile:

5 Likes
2

I'm reviving this well defined Topic by moving it to the Extensions Forum. It looks like a relatively easy extension to make and would be extremely useful.

See:

.... For those of you that have never seen tool tips in Microsoft Windows programs, it's similar to an Android Toast message but specifically focused on telling the User what specific components are for/do. It's most useful if you are using image buttons to save screen space. In a desktop program a tool tip will pop-up when the mouse cursor is hovered over the component:

ToolTip

  • I can't see that working in Android because you can't really hover instead of tapping - but you could have a button that reveals the tool tips for the other components?
1 Like
3

In some apps, I got it to hover by long pressing it (no lied)

1 Like
4

You could use a popup menu extension with long click for this

2 Likes
5

..... more detail Tim?

2 Likes
6

But what is the program you used to demonstrate the tooltip? Interested in checking it out!

1 Like
7

I will have to make an example....

2 Likes
8

...that is on a PC. It's a program I wrote to create a List Block rapidly.

2 Likes
9

A basic example

popupTooltip.aia (32.4 KB)

(Image is only click, not long click - but it can be a long click)

1 Like
10

I think that's a clever idea. It is ugly though, and how would the User know to use a long click?

My work-around is for the Splash Screen to be an image of the GUI with tips in place:

Splash

..... but that's not at all good for multi screen, nor Apps that support multiple languages, in which case I have an image of all buttons with a description beside them as a Help screen:

Screenshot
Screenshot263×556 100 KB

Still not as good as 'real' tooltips though.

11

The popup extension will allow for images to be displayed, and actions on selection (if required...)

No more ugly than yours :wink:

Tell the user to long click for a tooltip :wink:

12

There is still a need for genuine Android tooltips - other platforms not based on AI2 have them.

13

What about trying to create this extension while using the new tool by @MohamedTamer ?

Taifun

4 Likes
14

Thanks for the mention @Taifun!
Since the Beta Version of Rapid isn't yet available for everyone so far ( the beta testing program hasn't started yet), so I've created the extension using Rapid:
io.mohamed.tooltips.aix (4.4 KB)
The blocks are fairly simple:
image

5 Likes
15

Hi Mohamed

The aix is easy to setup components, but how is the display of the tooltip triggered? I'm thinking it will only work on a tablet, using a mouse.

16

Long press, set blocks in Screen initialise, not component specific blocks needed :slight_smile:

17

Tested Companion and APK, Android 10. Nope.

18

Tested companion Android 13. Yep. (not for label though, with a click extension, but when using chromebook emulator, the mouse hover works for the label - and the other components, whilst a long press does not, for the label)

19

Not quite with you Tim - Looks like you wrote that post whilst riding a horse :thinking:

Do you mean that a long press works for buttons on Android 13? I have only tested Image Buttons but I think they are the components that most need a tooltip.

20

Think I may prefer the popup menu approach with long press, offers more options/potential - images/colour selection for background and text/html text formatting/checkbox(!)/click through action.....

image

[edit] I asked Ulli, and he kindly updated his popup extension to include the dismiss method (may not yet be published), which means you can use a clock, with your chosen duration, to dismiss the popup programmatically.