Update tooltips and popover design according to UI Kit v5

[MewenLeHo]

Related issues

Closes #1594

Description

Update tooltips and popovers design.

Motivation & Context

Compliance to UI Kit v5.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

Tooltips: https://deploy-preview-1803--boosted.netlify.app/docs/5.3/components/tooltips/
Popovers: https://deploy-preview-1803--boosted.netlify.app/docs/5.3/components/popovers/#four-directions

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes

Documentation

• (NA) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• (NA) My new component is added in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	196b3ac
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64217351ef1ff300087cc754
😎 Deploy Preview	https://deploy-preview-1803--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[julien-deramond]

Is it an optical effect or the width of the border's arrow is missing 1 or 2 px? macOS + Firefox here

Might have found a solution by playing with ::before, the left/right values, and the border widths. But let's tackle it after having merged this PR. It's gonna be easier to review and to modify.

[louismaximepiton]

Few things

[julien-deramond]

LGTM! @louismaximepiton I let you finalize your review as well and after that, let's

[louismaximepiton]

Still looks fine to me, well done!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[isabellechanclou]

Decided in daily:

• Keep this "Custom popover" section.
• Restore the "Custom button" one (to do in an other PR)
• Add a design callout message (in this PR if not already done in PR docs: add design callouts in all the documentation when incompatibility with ODS #1614)
• Keep the custom padding-bottom of 10px (instead of 20px specified by Orange designers) that illustrates how this component can be custom
• To emphasize the customization, the orange color used for the borders and the background title part will be replaced by an other one (we thought of using Bootstrap's purple). Depending on the purple, the text color might be changed to white instead of black to ensure a satisfying text/background color contrast. We intend to use this same color on each custom variant of Boosted component. A PR will be made to Bootstrap to ask them to do the same.