Add some delay before logging calcite-tooltip missing element warnings

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

calcite-tooltip checks for the presence of reference-element immediately and logs a warning if the reference element is not present. In the general case this makes sense, but with some libraries (e.g. React, Maquette), the developer doesn't directly control DOM manipulation and this can lead to problems.

For example, consider the scenario where the developer has a calcite-action-pad, with a series of calcite-action, each with an associated calcite-tooltip. When the user makes some selection in the document, context-specific menu items are added to the action-pad, each with their own tooltip. When the selection is cleared, these items are removed.

Depending on framework, the tooltip might be added or removed before or after the referenced element. Because the DOM elements are added and removed sequentially, it is possible for the calcite-tooltip to log the warning while the render is still in progress.

While it is possible to workaround, for example by always rendering the conditional elements and using styling to hide the inactive elements, or by messing with the order of elements returned by render call, it isn't ideal.

Acceptance Criteria

Have some delay such that, when using React and other virtual DOM systems there is no warning logged when:

• A single render call adds both a tooltip and the tooltip's referenced element
• A single render call removes both a tooltip and the tooltip's referenced element

Relevant Info

No response

Which Component

calcite-tooltip

Example Use Case

While converting the Maps SDK for JavaScript's Sketch widget to use Calcite components, I added calcite-tooltip in an effort to improve tool discoverability and better match other ArcGIS apps that use calcite-action-pad. Unfortunately, I was not able to keep these tooltips in place for a few reasons. One of those reasons was log noise coming from calcite-tooltip.

Priority impact

impact - p3 - not time sensitive

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[driskull]

@nCastle1 it would be better to set the referenceElement to an actual DOM element in these cases instead of a string id to avoid this kind of scenario. In addition, its more performant because it doesn't have to query the dom by ID to find the element.