Amp-wp: Tooltips for Compatibility Tool

[postphotos]

As a developer user debugging an error in the Compatibility Tool, I should have tooltips that hint at what given columns do to explain what they mean and how I should use that information.

As a user gets stuck or confused, they should have both user-friendly hints and more verbose documentation at what the plugin does, why it's organized this way and how the tool intends to allow them to activate AMP quickly.

• [x] AC1: Based on #1361, #1362, #1363 and #1364 decide which columns need tooltips. Currently the Error by Type, Error by URL and Single screens all have tooltips on the header of the Status and Detail columns.
• [ ] AC2: For each tooltip, write copy and link to relevant URLs on the Plugin product site. (similar to #1401.)
• [ ] AC3: Implement each tooltip (per view, per column) based on what is decided in AC1/AC2.
• [ ] AC4: Re-implement to meet the spec of #1479.

[postphotos]

I've fleshed out the requirements for this story.

[jacobschweitzer]

Hey @postphotos , I've been working on #1362 and have gotten to the point I need some content for the tooltips and some clarification about how they should look.

The only way I'm aware of to make tooltips in core WP is to use admin pointers. It'd look like this:

How does that look? It opens when the user hovers over the "?" icon and closes when they click the dismiss link at the bottom.

[postphotos]

Thanks for sharing your thoughts/WIP @jacobschweitzer!

While it does vary from the mocks that @jillchu had presented at an earlier state, I'm OK with this as it matches the design styles of the pointer from #1254, especially if it's leveraging a WP Core design pattern and if may be less engineering effort to complete.

@jwold - are you OK with this for a "tooltip" style?

[jwold]

@jacobschweitzer using this tooltip you mentioned should be perfect. Thank you! cc @postphotos

[johnwatkins0]

Moving this to code review, @kienstra and @westonruter. The PR is #1448. Thanks!

[westonruter]

Tooltip text needs to still be finalized.

[kienstra]

Minor Styling Issue

The triangle of the 'tooltip' now points to the right of the ?, but ideally, it should point to the ?:

This looks to be the case wherever the tooltips are used:

• Invalid URLs page
• AMP Validation Error Index
• Single Error URL page (#1365)

Please move the entire admin pointer to the left.

[GaryJones]

@afercia @rianrietveld - what is the WP core approach for accessible tooltips? I don't recall seeing any other plugins using the admin pointers for this?

[kienstra]

Good question, @GaryJones!

[kienstra]

Current 'Tooltip' Copy

As @westonruter mentioned, the tooltip copy still needs to be determined.

Here's the current copy:

Status

An accepted validation error is one that will not block a URL from being served as AMP; the validation error will be sanitized, normally resulting in the offending markup being stripped from the response to ensure AMP validity.

Details
The 'tooltip' for Details is only a placeholder, and still needs copy.

[afercia]

@GaryJones the legacy core "pointers" aren't accessible. They've been discussed a few times in the last years and their usage generally discouraged. Reading in the comments above:

It opens when the user hovers over the "?" icon

how about keyboard users? how about communicating to users the "?" icon opens a sort of modal? I'd rather look at the popover implementation in Gutenberg, where a toggle button with a proper aria-label and visible button tooltip opens a floating panel that behaves like sort of a modal.

[kienstra]

Possible 'Tooltip' Text

Status

"Rejected" and "New Rejected" will block the URL from being AMP, when in Paired mode, with "Automatically accept sanitization" unchecked

Details

The parent element of where the error occurred

[jacobschweitzer]

These tooltips are finicky when positioning them. I've got it centered but in a different position.

How does this look @postphotos @jwold ?

[jwold]

@jacobschweitzer that looks like it should work from a positioning perspective. Thank you!

@afercia are you thinking it'd make more sense to use a popup like this?

[afercia]

@jwold yes, that used to be called popover in Gutenberg :)

[jacobschweitzer]

Ok I've applied the position change to the tooltips in PR #1472 . @westonruter It is a very small change, could you take a quick look?

[kienstra]

Request For Testing

Hi @csossi,
Could you please test this on:

• Invalid URLs
• AMP Validation Error Index
• Single Error URL page

Every ? icon should have a 'tooltip':

And these 'tooltips' should now appear to the right of the icon.

The copy is still being considered, though.

[kienstra]

Tooltip Copy

Hi @jwold,
Happy birthday!

Could you please help with the copy for the 'Status' and 'Details' tooltips?

Here's some possible copy.

Thanks, and no need to do this today 😄

[csossi]

QA review: all tooltip popups appear onClick. Needs re-checking after copy finalized

[GaryJones]

The work seems to be progressing on using the legacy pointers. Did the fact they are not accessible, and discouraged, get ignored? That they may not support keyboard-only users, or tell screen-reader users what the behaviour is?

https://github.com/Automattic/amp-wp/issues/1400#issuecomment-424232988

[westonruter]

@GaryJones Yes, I believe the goal is to switch to using the Gutenberg popovers as soon as possible.

[westonruter]

Opened #1479 to switch pointers to popovers.

[kienstra]

Request For Testing

Hi @csossi,
Could you please test the updated tooltip copy on this staging site?

Thanks!

[jwold]

@kienstra

Followup up on feedback from @afercia I'd like to propose a design change to all the tooltips in the AMP Plugin, using popover as the base for the tooltips, similar to how Gutenberg now does this.

It appears we can still do bold text, even increase font sizes (for inline headers, just not in blue backgrounds), and a "x" for dismiss.

Here's an example of changes we could make to the AMP Plugin tooltips to be more in line with the design style of the popovers from Gutenberg.

My guess is that we could take more liberties in the style and design of these updated popovers to be more eye catching, but for now we should probably stick to what's been done in Gutenberg.

cc @postphotos

[postphotos]

Updated to add AC4 (see #1479).

[kienstra]

Question About AC4

Hi @postphotos,
What do you think about removing AC4 (Re-implement to meet the spec of #1479)? Issue #1479 is on the v1.1 project.

Thanks, Leo!

[kienstra]

Status

This issue is awaiting the product site to be able to link to it in the copy (AC2, AC3). There's no action needed now.

[kienstra]

Moving Into To Do

As there is no action needed now, I'm moving this into 'To Do.'

When the product site has the URL ready, I'll add it to the tooltip, and request QA from @csossi.

[kienstra]

Moving To 1.1 Project

PR #1670 was the only remaining task for this issue planned for the 1.0 release.

But the links in it aren't to a live site, so I'm moving this issue out of the 1.0 project.

[westonruter]

This should be tackled with #2316.