CSS / JavaScript - content outside a element with overflow:hidden

Question

I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.

Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.

The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...

Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?

the html looks like this:

<div style="overflow:hidden; position:relative;">

  the main content

  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>

</div>

Solution

try this:

<div style="position:relative;">    
  <div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>    
  <div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>    
</div>

just place your main content to another div inside the main div and give provided css to hide the content if overflowing...

Comments

[Nico Burns]

Additionally, margin:0px;padding:0px on the containing div will ensure that there is no visible change from it being there

[James Cameron]

Just adding "overflow:none" & "position:relative" worked fine for me