Tooltip inside element to prevent page growth/cropping?

Is there a way to display the tooltip _inside_ the element it's assigned to, instead of to one side/corner of it? My issue is that no matter how I position it, it ends up extending the page either horizontally or vertically, introducing extra scrollbars which is extremely undesirable. Can't simply set overflow:hidden either, because that will crop the tooltip entirely for some of the items. I wouldn't mind displaying it over/inside the item instead, which would solve my issue. I only need to hover over items 1% of the time anyway, and even then I could just set a lower opacity for the tooltip to still see the underlying content if I need to.

Tried changing a few position attributes myself, but didn't manage to get the desired behavior. Should be fairly easy to do though, right? Any guidance?