Page MenuHomePhabricator

Publish Tooltip component
Closed, ResolvedPublic3 Estimated Story Points

Description

Overview

The WIP Tooltip component (directive) from T366104 requires more work and testing before it can come out of WIP and is published as a public component.

Reference:

Feature updates

  • If the cursor moves to the tooltip, the tooltip will still be shown.
  • The tooltip should appear after transition-duration-medium (250ms)
  • Tooltip should animate in using opacity and scale
    • Opacity starts at 0 (opacity-transparent) and ends at 1 (opacity-base)
    • Scale starts at 75% and ends at 100%
    • Origin of the scale should be the center of the trigger (not the center of the tooltip) so it looks like it’s coming from it and not from itself.
  • The animation of the tooltip appearing should be transition-duration-base (100ms)
  • The max width a tooltip should be is size-1600

Design updates

  • None

Documentation updates

  • Component guidelines T366129
  • Demos have accompanying text explaining the code example.
  • The select control type is added to the configurable demo. T366326

Testing

  • Snapshot tests.
  • Pixel tests capture the hover/focus behavior on desktop and mobile.

Acceptance Criteria

  • Move the component out of WIP and export to the library by exporting the component in lib.ts instead of components-wip/index.ts.

Event Timeline

AnneT triaged this task as Medium priority.Jun 10 2024, 5:36 PM
AnneT set the point value for this task to 3.
AnneT updated the task description. (Show Details)
lwatson changed the task status from Open to In Progress.Jun 11 2024, 10:16 PM
lwatson claimed this task.
lwatson updated the task description. (Show Details)
lwatson added a subscriber: egardner.

Tooltip should animate in using opacity and scale

  • Opacity starts at 0 (opacity-transparent) and ends at 1 (opacity-base)
  • Scale starts at 75% and ends at 100%
  • Origin of the scale should be the center of the trigger (not the center of the tooltip) so it looks like it’s coming from it and not from itself.

For this particular interaction, we will probably need to define CSS keyframes and use them to go from the starting state (opacity zero, scale 75%) to the final state (opacity 1, scale 100%). For scale origin, we might need a translate rule in addition to the transform one we will need for scale.

@lwatson I'd recommend focusing on the other design issues first, and then we can come back to this one. We may need to figure out where we want things like keyframe definitions to live in our system, since I think this will be the first time we've needed to reach for this.

Change #1046768 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] styles, Tooltip: add transitions and max-width

https://gerrit.wikimedia.org/r/1046768

Change #1046772 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] docs, Tooltip: update demos

https://gerrit.wikimedia.org/r/1046772

Change #1046768 merged by jenkins-bot:

[design/codex@main] styles, Tooltip: add animation and max-width

https://gerrit.wikimedia.org/r/1046768

egardner renamed this task from [placeholder] Publish Tooltip component to Publish Tooltip component.Tue, Jun 18, 11:38 PM

@lwatson Per Eric's request to review and leave any design feedback on the latest demo, here are a couple pieces of feedback (which you might already still be working on).

  • It looks like line-height is not being set on the text within the tooltip, so the tooltip is appearing much smaller than it should. The tooltip height should be a minimum of 24px tall if the line-height is ~20px and the vertical padding is 2px.
  • Hovering over the tooltip should make it remain visible, which it is not currently (yet).

I'm a bit confused about this task's relationship to T366104: Tooltip: Introduce a WIP component to Codex. Should that task actually be resolved if this is a continuation of that work?

I'm a bit confused about this task's relationship to T366104: Tooltip: Introduce a WIP component to Codex. Should that task actually be resolved if this is a continuation of that work?

That task was worked on in a previous sprint and was merged just after the sprint was completed and the Codex release was cut, so I guess it got bumped back to Up Next. I've resolved it now.

@lwatson Per Eric's request to review and leave any design feedback on the latest demo, here are a couple pieces of feedback (which you might already still be working on).

  • It looks like line-height is not being set on the text within the tooltip, so the tooltip is appearing much smaller than it should. The tooltip height should be a minimum of 24px tall if the line-height is ~20px and the vertical padding is 2px.

This can be done in a quick follow-up patch this sprint (i.e. tomorrow). @lwatson feel free to post a patch for this.

  • Hovering over the tooltip should make it remain visible, which it is not currently (yet).

This one might be a little more complicated because it will require us to rethink some of the JS interaction behaviors. Right now, the tooltip disappears as soon as the cursor leaves the reference element. There is no way for the user to hover over the tooltip without first hovering over the background of the page first (which will hide it).

We could potentially introduce a slight delay here using setTimeout, and then if the tooltip element receives a hover event during this window of time the previously started countdown would be cleared; we'd do the same thing once the cursor left the tooltip element itself. The side-effect here is that the tooltip would persist slightly after the user moused away from it in all circumstances. I'm thinking of like 200 or 300 milliseconds, not a long amount of time. I'll try to get something up for this tomorrow.

Change #1048054 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Tooltip: Allow tooltip to persist on hover

https://gerrit.wikimedia.org/r/1048054

Change #1048069 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Tooltip: add height and line-height

https://gerrit.wikimedia.org/r/1048069

Change #1048054 merged by jenkins-bot:

[design/codex@main] Tooltip: Allow tooltip to persist on hover

https://gerrit.wikimedia.org/r/1048054

Change #1049176 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Tooltip: move out of WIP

https://gerrit.wikimedia.org/r/1049176

Change #1046772 merged by jenkins-bot:

[design/codex@main] docs, Tooltip: update demos

https://gerrit.wikimedia.org/r/1046772

Change #1048069 merged by jenkins-bot:

[design/codex@main] Tooltip: add line-height

https://gerrit.wikimedia.org/r/1048069

Change #1049176 merged by jenkins-bot:

[design/codex@main] Tooltip: move out of WIP

https://gerrit.wikimedia.org/r/1049176

Change #1049640 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

https://gerrit.wikimedia.org/r/1049640