🐛 fix(bal-hint, bal-popover): Bal popover not shown inside stacking context

[nobilo]

Current Behavior

If we use bal-hint or any component that uses bal-popover it injects the component inside the dom tree where it is called. If that element is smaller and inside stacking context then showing popover which should be bigger then that element is not working. This is the issue that for example gets manifested when using ag gird and one wants to inject tooltip inside the table cell.

Expected Behavior

Pop up should be above everything and visible

Steps to Reproduce

1. open on codesandbox
2. try to however over second row, , 3rd is above second
3. Also in the same use case, width of pop up is dependent on the width of element in which pop up dom element is injected which causes another issue

Version

16.2.1

Browsers

Chrome

Device

Desktop

Code Reproduction URL

https://codesandbox.io/p/sandbox/stacking-context-bal-popup-issue-8n72gj?workspaceId=a2a46f2a-cd25-4766-816d-b070841879f0&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm016fk2j0006356lf2wgvec0%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm016fk2i0002356lvldfocqu%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm016fk2i0003356leoy3d8q7%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm016fk2i0005356lhsf5km17%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm016fk2i0002356lvldfocqu%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm016fk2i0001356l9ceev855%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm077tt1m000z356luh28vhin%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Fexample.component.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A61%252C%2522startColumn%2522%253A21%252C%2522endLineNumber%2522%253A61%252C%2522endColumn%2522%253A21%257D%255D%257D%255D%252C%2522id%2522%253A%2522cm016fk2i0002356lvldfocqu%2522%252C%2522activeTabId%2522%253A%2522cm077tt1m000z356luh28vhin%2522%257D%252C%2522cm016fk2i0005356lhsf5km17%2522%253A%257B%2522id%2522%253A%2522cm016fk2i0005356lhsf5km17%2522%252C%2522activeTabId%2522%253A%2522cm0axbv4y000n356lovivljlw%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm016fk2i0004356lezjqtkdf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm077ural000v356le8l708in%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522SANDBOX_INFO%2522%252C%2522isCloud%2522%253Afalse%252C%2522id%2522%253A%2522cm078a4mq0066356lnye1kpmx%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm0axbv4y000n356lovivljlw%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm016fk2i0003356leoy3d8q7%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm016fk2i0003356leoy3d8q7%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Additional Information

Another example by usign ag-grid:

Proposal:
maybe it would be good to add some flag to inject popover in the root of the html page or to pass id in which we want to inject.

I see in the documentation we have reference for popover: https://design.baloise.dev/?path=/story/components-data-display-popup--popover&globals=framework:angular
but i think it does not exists , so i think it is also worth upgrading documentation

Code of Conduct

• I agree to follow this project's Code of Conduct

[hirsch88]

Hi @nobilo could try to fix this issue and if you need help let me know or ogranize a meeting with me.

[nobilo]

Tnx @hirsch88 , how do you suggest we fix it should we reenable reference id for popover?

[hirsch88]

@nobilo try to do it with z-index. let me know if you need more help