CODEWITHSUNDEEP
javascriptcssoverflowabsolute
Alex
Alex

Reputation: 68406

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

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>

Upvotes: 9

Views: 38482

Answers (3)

Alalade Samuel
Alalade Samuel

Reputation: 672

CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.

Consider the following:

HTML

<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>

CSS

.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`

This outputs the following:
enter image description here

Note that the rest of the texts that overflow are hidden.

Upvotes: 0

Vaibhav Gupta
Vaibhav Gupta

Reputation: 1612

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

Upvotes: 12

Moin Zaman
Moin Zaman

Reputation: 25435

if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after

Upvotes: -1

Related Questions