Component tooltips

[akx]

Is your feature request related to a problem? Please describe.

It would be nice to be able to add tooltips to components. Right now, downstream repositories need to resort to hacks such as https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/89f9faa63388756314e8a1d96cf86bf5e0663045/javascript/hints.js.

This would complement #3291's info=, which adds a help text under the component.

Describe the solution you'd like

gr.Number(tooltip="How many batches of images to create")

would render the number input with a title="How many batches of images to create" attribute, so one can see the hint when mousing over.

Additional context

If this would be accepted, I'm willing to do the work (in fact, I may already have a WIP branch... 😇)

[abidlabs]

Thanks @akx for the suggestion. We've discussed adding tooltips in the past (see #3050), but have avoided them for accessibility reasons. We prefer persisting the text using info. (cc @hannahblair if you have any suggestions here)

[akx]

It'd be no big issue to make the title= an aria-label= too.

[pngwn]

Accessibility and usability. Tooltips are basically worthless on mobile which makes up a huge portion of our user-base. People should be putting that text on screen at all times, with accordions or without.

[akx]

Tooltips are basically worthless on mobile which makes up a huge portion of our user-base.

I disagree. Android does tooltips by way of long-press on mobile. That could be done here too if one wanted to enable tooltips on touch devices.

Besides, even if "a huge portion of the user-base" is on mobile, there's still everyone else who's on a pointerful device, where tooltips are very useful. (Then there's a segment that uses e.g. an iPad with a mouse.)

People should be putting that text on screen at all times, with accordions or without.

On mobile, screen space is at a premium, so I'd rather avoid having a lot of text on screen at all times (i.e. forcing the user to scroll up and down to see all of the UI since there's help text in the way), or use bulky accordions to show and hide help text.

[pngwn]

The problem with tooltips isn't the interaction, it is knowing that they exist at all. Tooltips generally go unnoticed by mobile users, regardless of how good the interaction is. There is plenty of user research demonstrating this. Likewise, long press is usually reserved for context menus on mobile and users wouldn't typically know to long press for additional information.

We could add text to notify those users but that screen real estate could be used to just display the information.

[pngwn]

iPad users make up a very (very) small portion of Gradio app users, iPad users using a pointer device is an even smaller portion of that.

[akx]

We could add text to notify those users

Sure, on mobile the existence of a tooltip could be presented through e.g. a (?) icon after the component's label, and you'd get the tooltip help content by tapping it.

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.