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

javascript css overflow absolute
Alex picture Alex · Aug 28, 2010 · Viewed 22.7k times · Source

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>

Answer

Vaibhav Gupta picture Vaibhav Gupta · Aug 28, 2010

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...

Related questions

Check if an element's content is overflowing?

What's the easiest way to detect if an element has been overflowed? My use case is, I want to limit a certain content box to have a height of 300px. If the inner content is taller than that, I cut …

Read More
Bootstrap button drop-down inside responsive table not visible because of scroll

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow: auto; property. How can I fix that in order to show drop-down option of button when …

Read More
overflow-x: visible; doesn't work with overflow-y: auto; any workaround?

i am trying .item { width: 100px; overflow-x: visible; overflow-y: auto; } But vertical overflow:auto seems to override horizontal's fiddle: http://jsfiddle.net/xcUTV/ Is there any workaround for this? even with a bit of javascript

Read More