Feat(Tooltip): Tooltip Component

[FMorrison87]

Brief Description

This PR adds a new component, rux-tooltip. This new Tooltip component offers a solution for developers to display incidental, text-based information based on a set trigger. Guidance is provided to address what sorts of elements should be tooltip triggers, but it is up to the developer to decide ultimately. Tooltips display on hover over, or focus in. Tooltip provides modification options for display and functionality in the form of props:

• open: toggles the tooltip's visibility
• message: the tooltip's content
• placement: set via use of floating-ui, placement around the trigger
• delay: set to 800ms default, the delay from when the trigger is hovered over or focused in and when the tooltip appears, can be set via prop or CSS custom property.
• offset: distance from the trigger to the tooltip, set to 8px by default
• disable-auto-update: disables the collision detection's flip method which bumps the tooltip to the opposite axis if there is not sufficient room for display within the viewport, happens on render and scroll.
• strategy: positioning strategy for tooltip placement, can be absolute or fixed, set to absolute as default

JIRA Link

Tooltip Component

Related Issue

General Notes

Motivation and Context

This new component provides a new way for Astro developers to display incidental information when the user hovers over, or focuses in on a set trigger.

Issues and Limitations

Types of changes

• [ ] Bug fix
• [x] New feature
• [ ] Breaking change

Checklist

• [x] This PR adds or removes a Storybook story.
• [x] I have added tests to cover my changes.
• [x] Regressions are passing and/or failures are documented
• [x] Changes have been checked in evergreen browsers

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e36fba7b989523f344aebd96c9532349c92ef9ef

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for astro-preview ready!

Name	Link
🔨 Latest commit	e36fba7b989523f344aebd96c9532349c92ef9ef
🔍 Latest deploy log	https://app.netlify.com/sites/astro-preview/deploys/63c063fa257b0500081c1576
😎 Deploy Preview	https://deploy-preview-992--astro-preview.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.

[markacianfrani]

not sure if this is an actual issue or not yet but if you double click 'trigger' in the basic/index.html, it'll select 'trigger' and the first word in the tooltip message.

[markacianfrani]

Given this:

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem;">
                <rux-tooltip message="content" open>
                    <div style="border: 2px solid red; padding: 1rem;">
                        Trigger 1
                    </div>
                </rux-tooltip>
                <div style="border: 2px solid red; padding: 1rem;">
                    Trigger 2
                </div>
                <div style="border: 2px solid red; padding: 1rem;">
                    Trigger 3
                </div>
        </div>

I would expect Trigger 1 to be the same width as Trigger 2 and 3.

If I explicitly set a width on the light dom trigger element, I would expect it to be 150px but Trigger 1 is showing as 186px where 2/3 are 150.

<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem;">
                <rux-tooltip message="content" open>
                    <div style="border: 2px solid red; padding: 1rem; width: 150px;">
                        Trigger 1
                    </div>
                </rux-tooltip>
                <div style="border: 2px solid red; padding: 1rem; width: 150px;">
                    Trigger 2
                </div>
                <div style="border: 2px solid red; padding: 1rem; width: 150px;">
                    Trigger 3
                </div>
        </div>

[markacianfrani]

currently seeing an ish w/ storybook where delay is undefined. not sure if it makes sense to mark delay as optional because it does have a default value (800). that might be irrelevant though. we might just have to change the type to number

[markacianfrani]

/update-snapshots