I'm trying to implement a sidebar with a tree like list. I want each element in the tree to fill one line only - no overflow, no new line / word wrap. An `overflow: hidden;` could be a good solution, but there's another requirement - each line will have an absolute div as a tooltip / popover (bootstrap's popover), which I don't want to hide or 'clip' (it suppose to be in some top layer).
The problem is that the popover is generated as a child of the element that needs to be hidden if overflowing. How can I achieve a behavior that matches the attached image? 

Example:

![enter image description here](https://i.stack.imgur.com/vqQTQ.jpg)