Let me start by apologizing for the wording of this post. I am a lowly intern with virtually no Angular2 experience who is way over his head, so some of the terminology may be off. So to sum it up...
I am having issues with z-index frames for parts of components. So I have components that are generated in variable quantity. These are graphs but for simplicity sake it's just a component of divs. Each one of these components also contain a generated minitoolbar component. These mini toolbars are generated within the component, however when there are multiple component graphs, I need the mini toolbars to be brought to the top frame so that they are never blocked by other components. As of now since each component has its own stack frame, simply increasing the z-index will not work.
I'm looking for the best way to accomplish the goal of having the minitoolbar generated with the graphs, but brought up to the parent div while maintaining its position on command. The mini toolbar also has data derived from the graphs so I am not sure the consequences of pulling it out of the component. I've attempted doing something along the lines of the ng bootstrap tooltip directive, such as an appendToBody, but issue is once its appended to the body it no longer has reference to the Graph and can not store it away when its not needed. The minitoolbar only shows when there is a mouseover on the graph in wich the toolbar is associated with. but having difficulty as only examples I have found have been with text or simple templates html.
I am thinking something along the lines of having a storage container in the main parent div that on the mouseover pulls the component and injects it into the container. But any guidance on possibly a better route or possibly examples of something similar would be greatly appreciated.
