I want to show an overlay div sitting on top of the hovered div similar to this effect on IBM website: http://www.ibm.com/us/en/
Please look at the 3 boxes near the footer. Hover on the box "Let's build a smarter planet" to view the effect.
I've created a working example. Basically you need to create 3 divs with a visible and the invisible containers, add hover event handler and toggle the tooltip's visibility in that handler.
HTML:
<div class="parents">
<div class="box type-1">box 1</div>
<div class="tooltip type-1">tooltip 1</div>
</div>
<div class="parents">
<div class="box type-2">box 2</div>
<div class="tooltip type-2">tooltip 2</div>
</div>
<div class="parents">
<div class="box type-3">box 3</div>
<div class="tooltip type-3">tooltip 3</div>
</div>
CSS:
.parents
{
float: left;
margin: 5px;
}
.box,
.tooltip
{
width: 80px;
height: 30px;
line-height: 30px;
background-color: #666;
color: #fff;
border: 1px solid #222;
text-align: center;
}
.tooltip
{
display: none;
position: absolute;
top: 50px;
}
jQuery code:
$(document).ready
(
function ()
{
// add hover event handler
$('.box').hover
(
function ()
{
// find the triggering box parent, and it's tooltip child
$(this).parent().children('.tooltip').animate
(
{
opacity: "toggle", // toggle opacity
}
);
}
);
}
);
IBM is using Dojo's .expand method. You can do the same functionality in jQuery using the expand plugin.
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