Tooltip impacts layout

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The <calcite-tooltip> element itself is treated as a component with layout that impacts the flow of content. For example, within a flex layout the tooltip takes up a content box:

Expected Behavior

The tooltip element does not have an impact on layout.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/MYgzWEK

Reproduction Steps

1. Visit the sample and possibly wait awhile for the unkpg.com resources to load.
2. Compare the displayed layout with the expected vs. actual layouts.

Reproduction Version

3.0.0-next.111

Relevant Info

Suggested fix is to have the tooltip style its :host with display: contents;.

Regression?

2.13.2

Priority impact

impact - p3 - not time sensitive

Impact

The issue is easy to work around by giving the tooltip contents display externally. However, this issue does represent a backwards compatibility break with how tooltips impacted layout in 2.13.2.

For a specific use case, we have informational icons associated with input labels in a "space-between" flex layout. After upgrading to Calcite 3, the label space is truncated and the icon is positioned in the center of layout instead of aligned with the trailing edge.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[driskull]

Suggested fix is to have the tooltip style its :host with display: contents;.

I like that suggestion. This would be a breaking change since we're changing the default display from block to contents but it could fall under the breaking changes for 3.0. Thoughts @jcfranco

We should also do this for popover if we do this for tooltip.

[driskull]

Previously, tooltip host elements were also displayed as block but they were positioned absolute or fixed so they wouldn't take up any space. However, this caused scrollbars in some scenarios.

[jcfranco]

Great suggestion. I think we could include it in 3.0 as part of #10240 since popover and tooltip are considered in layout after it was installed. @geospatialem @brittneytewks

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 3.0.0-next.116: