Make Child element appear outside of parent
Question
I have a slider on my page that has a height of 200px and has overflow hidden applied, inside this slider there are list items/images which are aall also 200px. When you hover over the image id like to show a tooltip above, my only problem is that the tooltip is hidden due to the overflow rule.
I thought id be able to show the tooltip by giving it a higher z index but that didnt seem to work, can you get child elements to break from their parent?
I hope this makes sense.
In brief my code structure is similar to the below
<div class="clip">
<a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
<a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
<a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a>
</div>
css...
.clip {
height:200px;
overflow:hidden;
width:400px;
}
.tooltip {
font-weight:bold;
position: relative;
}
.tooltip a {
font-weight:bold;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent;
font-size: 11px;
height: 163px;
left: -100px;
margin-left: 0;
padding: 40px 30px 10px;
position: absolute;
top: -200px;
width: 310px;
z-index: 99;
}
3 answers
solution1
4 ACCPTED 2011-09-09 15:14:05
To the best of my knowledge you can not get a child element to break the rules of a parent as you have described. Instead, you may want to attach the tooltip to a top level element such as document.body, and position it against the absolute position of your image with a little javascript
<head>
<style>
#container {
position: relative;
}
#tooltip {
position: absolute;
display:none;
width: 200px;
height: 100px;
z-index: 99;
background-color: gold;
top: 0px;
left: 0px;
}
.clip {
height: 200px;
width: 400px;
overflow: hidden;
background-color: #C0C0C0;
position: absolute;
top: 50px;
left: 0px;
}
img {
height: 200px;
width: 100px;
background-color: #222222;
}
</style>
</head>
<script>
function imgover(img, tip) {
document.getElementById('tooltip').style.display = 'block';
document.getElementById('tooltip').innerHTML = tip;
document.getElementById('tooltip').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('tooltip').style.display = 'none';
}
</script>
<body>
<div id="container">
<div id="tooltip">Tooltip Text</div>
<div class="clip">
<img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/>
<img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/>
<img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/>
</div>
</div>
</body>
solution2
1 2014-06-18 06:14:26
You can do the trick by setting the position to fixed on your tooltip. You'll have to set its position based on its parent by using negative margins.
solution3
0 2011-09-09 15:59:26
When you apply position: relative to a container, it makes any children that have position: absolute be positioned absolutely inside the container . So (0,0) will be the top left corner of the container, not of the window. You can remove the position: relative from the container, but then you will have to know the exact x,y position to place the tooltip.
If you are using a fluid layout, you won't know where to position it. So instead, you can leave it with relative positioning, and then adjust it a little with JavaScript. Something like this:
var tooltips = document.getElementsByClassName("tooltip");
var i;
for (i = 0; i < tooltips.length; i++) {
tooltips[i].style.top = tooltips[i].parentNode.parentNode.style.top - 200;
tooltips[i].style.marginLeft = 0; // or display = "block" or whatever to show it
}
Note that this code is untested. Note also that getElementsByClassName is not supported in older browsers, but you can find a manual implementation of it if you search the web.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.