427 add info button and tooltip

[vraja-pro]

Context

Summary

This PR can be summarized in the following changelog entry:

• Adds info tooltip to the table widget.
• [@yoast/ui-library 0.1.0 enhancement] Adjusts the tooltip container component for easier movement from trigger to the tooltip
• [@yoast/ui-library 0.1.0 enhancement] Adds light variant to the tooltip element.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Set a development environment with site kit configured.
• Go to Yoasy SEO->General
• Check you see the table for top 5 most popular content.
• Check the info icon in the top right corner matches the design:
• Hover over the icon and check you see the info tooltip as in the design.
• Check you can easily move from the icon to the tooltip.
• Click on the button and check the tooltip stays even when not hovering on the icon.

UI Library - Tooltip container component

• Spin the ui library storybook
• Check the tooltip container component.
• Check the tooltip is visible on hover and focus.
• Check you can easily move from the trigger to the tooltip without it disappearing.

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes Add info button and tooltip

[coveralls]

Pull Request Test Coverage Report for Build 5079c8b234a9132de3e4f4dd25c05b4df6549179

Details

• 16 of 16 (100.0%) changed or added relevant lines in 4 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 54.581%

---

Totals
Change from base Build 2d39f817ad47444fce9230e581a5710e9e3958b5:	0.0%
Covered Lines:	30320
Relevant Lines:	55974

---

💛 - Coveralls

[pls78]

CR: ✅
Acc: ⚠️

• Shouldn't we change the mouse pointer when hovering on the info icon? If we don't I'm afraid users won't get the fact they can click it to keep the tooltip open.
• In storybook I think there's something funky going on in the Control column:
  

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[pls78]

CR && Acc: ✅
I still have two minor things:
In the storybook, is it ok for the tooltip in the tooltip container to be like this (i.e. light on light)?

2. . The Control column still seems off to me: is this how it should be?