Add show on hover to info popover

[becdetat]

Changes proposed in this Pull Request

• Adds a show on hover feature to the info popover component
• Uses that feature for the "Store" menu item info popover

Testing instructions

• Smoke test the "Store" menu item info popover

Fixes #48982

[matticbot]

Test live: https://calypso.live/?branch=add/show-on-hover-to-info-popover

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~60 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login       +236 B  (+0.0%)      +60 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~3166 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
zoninator                          +861 B  (+0.4%)     +195 B  (+0.3%)
wp-super-cache                     +861 B  (+0.3%)     +195 B  (+0.3%)
woocommerce                        +861 B  (+0.0%)     +208 B  (+0.0%)
themes                             +861 B  (+0.2%)     +195 B  (+0.2%)
theme                              +861 B  (+0.3%)     +195 B  (+0.2%)
stats                              +861 B  (+0.2%)     +203 B  (+0.1%)
site-purchases                     +861 B  (+0.1%)     +202 B  (+0.1%)
site-blocks                        +861 B  (+0.3%)     +207 B  (+0.2%)
settings-writing                   +861 B  (+0.2%)     +181 B  (+0.1%)
settings-security                  +861 B  (+0.3%)     +208 B  (+0.2%)
settings-performance               +861 B  (+0.2%)     +202 B  (+0.2%)
settings-jetpack                   +861 B  (+0.3%)     +208 B  (+0.3%)
settings-discussion                +861 B  (+0.3%)     +204 B  (+0.3%)
settings                           +861 B  (+0.1%)     +180 B  (+0.1%)
sensei                             +861 B  (+0.7%)     +215 B  (+0.6%)
security                           +861 B  (+0.2%)     +207 B  (+0.2%)
reader                             +861 B  (+0.1%)     +185 B  (+0.1%)
purchases                          +861 B  (+0.1%)     +223 B  (+0.1%)
purchase-product                   +861 B  (+0.5%)     +202 B  (+0.5%)
privacy                            +861 B  (+0.3%)     +207 B  (+0.3%)
posts-custom                       +861 B  (+0.2%)     +210 B  (+0.2%)
posts                              +861 B  (+0.2%)     +210 B  (+0.2%)
plugins                            +861 B  (+0.2%)     +204 B  (+0.2%)
plans                              +861 B  (+0.1%)     +202 B  (+0.1%)
people                             +861 B  (+0.2%)     +195 B  (+0.2%)
pages                              +861 B  (+0.3%)     +201 B  (+0.3%)
notification-settings              +861 B  (+0.2%)     +207 B  (+0.2%)
me                                 +861 B  (+0.3%)     +207 B  (+0.3%)
marketing                          +861 B  (+0.2%)     +202 B  (+0.1%)
jetpack-connect                    +861 B  (+0.1%)     +202 B  (+0.1%)
jetpack-cloud-settings             +861 B  (+0.4%)     +201 B  (+0.3%)
jetpack-cloud-pricing              +861 B  (+0.2%)     +202 B  (+0.2%)
jetpack-cloud-partner-portal       +861 B  (+0.3%)     +202 B  (+0.3%)
import                             +861 B  (+0.3%)     +195 B  (+0.3%)
help                               +861 B  (+0.1%)     +207 B  (+0.1%)
hello-dolly                        +861 B  (+0.7%)     +207 B  (+0.6%)
happychat                          +861 B  (+0.3%)     +207 B  (+0.3%)
google-my-business                 +861 B  (+0.3%)     +192 B  (+0.2%)
export                             +861 B  (+0.5%)     +205 B  (+0.4%)
email                              +861 B  (+0.2%)     +205 B  (+0.2%)
earn                               +861 B  (+0.3%)     +203 B  (+0.2%)
domains                            +861 B  (+0.1%)     +202 B  (+0.1%)
comments                           +861 B  (+0.1%)     +210 B  (+0.1%)
checkout                           +861 B  (+0.1%)     +202 B  (+0.1%)
activity                           +861 B  (+0.1%)     +202 B  (+0.1%)
account-close                      +861 B  (+0.2%)     +207 B  (+0.2%)
account                            +861 B  (+0.2%)     +207 B  (+0.2%)
media                              +236 B  (+0.0%)      +60 B  (+0.0%)
home                               +236 B  (+0.0%)      +60 B  (+0.0%)
backup                             +236 B  (+0.0%)      +60 B  (+0.0%)
accept-invite                      +236 B  (+0.2%)      +60 B  (+0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~1427 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-design-playground                              +990 B  (+0.1%)     +236 B  (+0.1%)
async-load-design                                         +990 B  (+0.0%)     +235 B  (+0.0%)
async-load-calypso-my-sites-sidebar                       +876 B  (+0.4%)     +196 B  (+0.3%)
async-load-signup-steps-theme-selection                   +861 B  (+1.3%)     +195 B  (+1.1%)
async-load-signup-steps-plans-atomic-store                +861 B  (+0.6%)     +202 B  (+0.6%)
async-load-signup-steps-plans                             +861 B  (+0.4%)     +202 B  (+0.3%)
async-load-signup-steps-domains                           +861 B  (+0.3%)     +226 B  (+0.3%)
async-load-signup-steps-clone-credentials                 +861 B  (+1.2%)     +219 B  (+1.1%)
async-load-signup-steps-about                             +861 B  (+1.5%)     +206 B  (+1.3%)
async-load-design-blocks                                  +861 B  (+0.0%)     +206 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover             +861 B  (+0.2%)     +196 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal           +861 B  (+0.1%)     +202 B  (+0.1%)
async-load-signup-steps-user                              +236 B  (+0.2%)      +60 B  (+0.2%)
async-load-signup-steps-clone-point                       +236 B  (+0.1%)      +60 B  (+0.2%)
async-load-calypso-post-editor-editor-media-modal         +236 B  (+0.1%)      +60 B  (+0.1%)
async-load-calypso-layout-masterbar-drafts-popover        +236 B  (+0.5%)      +60 B  (+0.4%)
async-load-calypso-components-web-preview-component       +236 B  (+0.0%)      +60 B  (+0.0%)
async-load-calypso-components-sites-popover               +236 B  (+0.3%)      +60 B  (+0.3%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mattsherman]

I do not think we should make this change.

It is inconsistent with the use of the info popover everywhere else in Calypso. And, by hovering, there are accessibility issues... if the user does not carefully move their mouse pointer to the "Learn more" link in the popover, the whole thing disappears. This can be very frustrating. (Though, it could probably be made less likely by increasing the timeout before auto-dismissing the popover.)

And by putting this support in the common InfoPopover component, we are inviting other developers to start using this sometimes, which will lead to further inconsistent usage. Either this component should always work with hover, everywhere, or never, in my opinion.

It's not a big deal if the user doesn't realize to click on the info button in this case, as clicking on the entire "Store" menu item will take them to a page that has a large notice at the top of it providing even more detail than this popover does.

I've tested the change and it works, including on iOS (both with touch and trackpad). And existing use of the info popover elsewhere seems to be functioning properly still too.

/cc @elizaan36 Do you feel strongly that we should still make this change at this point, even if inconsistent with usage elsewhere in Calypso?

[elizaan36]

Hey @mattsherman

Yes let's make sure the tooltip stays active while the user hovers over it in order to access the learn more link.

As for requiring the click, I'm a little unclear as to why this is being brought up now after many design specs that specify "tooltip on hover", but I don't think it's a problem to diverge from Calypso for this temporary feature. That said, I don't think this functionality should be included in the common component for usage elsewhere.

Imo, it's more of a problem to require users to think about if they need to click in order to open the tooltip, and will they accidentally click on the nav.

[becdetat]

Hover to show the tooltip is inconsistent with the rest of Calypso, I debated with myself whether it was appropriate to diverge the behaviour especially since we (Isotope) don't work in Calypso much and don't have the full context over the use of this component. However I'm ok with deferring to @elizaan36 on this.

I don't see a big problem with leaving the functionality in the InfoPopover component, I would like to assume that future developers are going to use this maturely - it's opt-in functionality for a start, the default behaviour is still 'show on click'.

[mattsherman]

I'm still not a fan of making this change, but I also do not want to hold up a change that others believe should be made... this is not an change I feel strongly enough about to actively block. There are pros and cons to it, and I can see the argument for making the change.

I'd like to see the timeout increased a bit to make the auto-dismiss a bit more forgiving for users that don't precisely position the cursor when going to click on a link in the popover.

I'm approving this pre-emptively, based on my review of the code and testing conducted yesterday. The code changes seem solid and well done. It's just the functionality in the context of the existing system that I disagree with.

[mattsherman]

Could you try bumping this up a bit and seeing if it still feel okay? It would help prevent the popover from auto-dismissing when the user accidentally moves the cursor briefly outside of the info button.

[becdetat]

250ms seems to be the sweet spot, thanks for the review @mattsherman

[mattsherman]

This feels much better!

[mattsherman]

Tested with increased auto-dismiss timeout... much better! Thanks for making the change.