Menu
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;
}
400
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
