Tooltip size change by placement makes calculations awkward

[Westbrook Johnson]

This code:

https://github.com/adobe/spectrum-css/issues/new?permalink=https%3A%2F%2Fgithub.com%2Fadobe%2Fspectrum-css%2Fblob%2F0a74e16df1e0103cc9e2db2a3388527c3cbc4040%2Fcomponents%2Ftooltip%2Findex.css%23L152-L153

In conjunction with this code:

spectrum-css/components/tooltip/index.css

Lines 259 to 260 in 0a74e16

 height: var(--mod-tooltip-tip-inline-size, var(--spectrum-tooltip-tip-inline-size)); 
 width: var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)); 

Means that the tip of a Tooltip takes different size metrics depending on which direction is it tipping in. That means that is the direction is tips is altered by JS there could be a but of a cycle trying to calculate the position of the tip. This can be mitigated by changing the tip to always be square and then altering its clip path to suit. Something like:

.spectrum-Tooltip-tip {
    clip-path: polygon(0 -5%, 50% 50%, 100% -5%);
    width: var(--spectrum-tooltip-tip-inline-size) !important;
    height: var(--spectrum-tooltip-tip-inline-size) !important;
}

.spectrum-Tooltip--top .spectrum-Tooltip-tip {
    top: 100%;
}

.spectrum-Tooltip--bottom .spectrum-Tooltip-tip {
    bottom: 100%;
    clip-path: polygon(50% 50%, 0 105%, 100% 105%);
    top: auto;
}

.spectrum-Tooltip--left .spectrum-Tooltip-tip,
.spectrum-Tooltip--right .spectrum-Tooltip-tip {
    top: 50%;
    transform: translateY(-50%);
}

.spectrum-Tooltip--right .spectrum-Tooltip-tip {
    clip-path: polygon(50% 50%, 105% 100%, 105% 0);
    left: calc(
        var(
                --mod-tooltip-tip-block-size,
                var(--spectrum-tooltip-tip-block-size)
            ) * -2
    );
    right: 100%;
}

.spectrum-Tooltip--left .spectrum-Tooltip-tip {
    clip-path: polygon(-5% 0, -5% 100%, 50% 50%);
    left: 100%;
}

[Westbrook Johnson]

It's highly likely that this situation would play out similarly in the Popover patter, as well.