Visual issues with Tooltips

[CarlosAndresRamirez]

Summary

In src/api/tooltips/tooltipMixins.js and src/api/tooltips/Tooltip.js
Tooltips are created and displayed.

If the tooltip’s parentElement is removed from the DOM before the tooltip show() method is executed, the tooltip may appear in an incorrect location or fallback position. In critical dashboard contexts, this can mislead users or obscure important visual elements. Without null checks, this scenario can also cause a JavaScript runtime error (TypeError), breaking tooltip functionality.

Impact

1. Misleading location: Could cause an operator to make decisions based on wrong context (thinking the tooltip belongs to a different data point).
2. Obscuring vital information: Could hide crucial readings or alerts at exactly the wrong moment.
3. User trust impact: Even subtle tooltips bugs can erode an operator’s trust in the display.

Expected vs Current Behavior

When the tooltip’s parentElement is missing from the DOM, the tooltip should not be displayed. The system should fail gracefully by skipping tooltip rendering, logging an appropriate warning/error, and avoiding incorrect placement that could mislead the user or block critical UI elements.

Steps to Reproduce

1. Create a tooltip bound to a specific parentElement in the DOM.
2. Remove (destroy) the parentElement from the DOM before calling the tooltip’s show() method.
3. Call show() on the tooltip instance.

Environment

• Open MCT Version: Current master repo
• Deployment Type: Clone master repo
• OS: Any
• Browser: Any

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

The fix is straightforward, check for parentElement in the show() function in ToolTip.js:

show() {
  const parentExists = this.tooltip && this.tooltip.parentElement &&
                       document.contains(this.tooltip.parentElement);

  if (!parentExists) {
    console.warn('Tooltip parent is gone');
    return;
  }

  document.body.appendChild(this.component.$el);
  this.isActive = true;
}