[Enhancement]:

[pashoo2]

Application/Team

Turbonomic

Summary

The default Tooltip container can't be customized through the TooltipOptions

Justification

If the parent element has CSS style rule overflow: hidden the tooltip might be either truncated or invisible.

If there is an option to specify the parent element for the Tooltip, the tooltip may be placed into a container above the one with overflow: hidden CSS rule, which makes it fully visible on the screen.

Desired UX and success metrics

When applying the parent setting:

1. The tooltip should appear at the same point on the screen as if its parent element hasn't changed from the default one(chart holder element).

2. The default styles and styles inherited from Carbon components, as if it's placed at the default position, applied to the Tooltip should not change. The Tooltip being placed to a different DOM hierarchy shouldn't change its look.

"Must have" functionality

There is a setting on TooltipOptions, that allows to specify the parent element for the Tooltip.

e.g.:
export interface TooltipOptions { ... parentElement?: HTMLElement, .... }

If the value of the setting is set to:

parentElement: document.getElementById('#tooltip_parent')

the markup would look like:

<div id="tooltip_parent">
   <div class="chart_holder ....">
   <!-- the tooltip element moved from this hierarchy -->
   ..... 
   </div>
   <!-- to this one -->
   <div class="cds--cc--tooltip ...">
    ...
   </div>
</div>

Specific timeline issues / requests

June 2024

Available extra resources

I might be able to help, but I will need some guidance.

What priority level would this issue be in your opinion?

P2