Firefly-2119: Tooltip Design and Bug Fixes

[aventura121]

Firefly-2119 Tooltip User Experience/Design Improvements

Description

This pull requests addresses the design and state management issues seen below, characterized by the tooltips rendering on hover, and then duplicating or overlapping on scroll or changing focus; and the tooltips in the table dropdown often carrying no information (i.e. they are redundant).

Existing Column Tooltip Pattern

Existing Filter Tooltip Pattern

Existing Table Options Tooltip Pattern

Existing Redundant Tooltip Pattern

Approach

For the filter boxes, the TAP constraint cells, and the Table Options column cells, the tooltip shows only while the input has focus, and moving the cursor off the box closes it. The cells also track their row index to handle scrolling.

For the TAP Project and Tables dropdowns, the tooltip shows only when it adds information: when an option's description is cut at the 140-character limit, the tooltip shows the full text.

Testing/Validation

Build: https://firefly-2119-tooltip-on-focus-3.irsakubedev.ipac.caltech.edu/firefly

Filter and Constraints Help Syntax

1. Hover a filter input. We expect the tooltip to not show.
2. Click into the input. We expect the tooltip to show.
3. Move the cursor off the input. We expect the tooltip not to show.

The same behavior is expected on the contraints' cells, and in the table options view.

• Notice also, if you scroll beyond the rows in view, the tooltip will close.

Tables Dropdown

In the table selection dropdown, we can view a source like GAVO, which has long descriptions for its tables, and see we still render such tooltips:

GAVO screenshot (continue to show tooltip because the description is long and carries information)

Where the options' text is fully visible by default, we do not render the tooltip:

NED screenshot (do not show tooltip because there is no additional information)

[lrebull]

wow, this is really impressive! works great as far as i can see!

[loitly]

The changes look great. I like the simplicity of this approach.
I noticed one minor issue (which may already exist). When I focus on a filter box, the tooltip appears as expected. However, after moving the mouse away and using Tab to navigate to other filter boxes, the tooltip continues to pop up for each one, even though the mouse is no longer hovering over any of them.

If it's an easy fix, could you include it in this PR? Not a big deal if not.

[aventura121]

The changes look great. I like the simplicity of this approach. I noticed one minor issue (which may already exist). When I focus on a filter box, the tooltip appears as expected. However, after moving the mouse away and using Tab to navigate to other filter boxes, the tooltip continues to pop up for each one, even though the mouse is no longer hovering over any of them.

If it's an easy fix, could you include it in this PR? Not a big deal if not.

Yeah, I see what you mean. But I think that's what we want, for keyboard users. Meaning, this way you don't need the mouse. (You're correct it's already in dev this way).