CSS / Jquery Effect - What is this ?

Question

Hi, on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?

Thanks

Answer 1

it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover

Answer 2

You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.

Answer 3

This is actually an effect that is pretty simple to create.

First, there is a hidden div in the HTML for the Tooltip.

<div class="popup" style="display:none;">Hidden Content Here</div>

Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).

$(".tooltip").hover(function(){
 $(this).children(".popup").fadeIn();  // Other effects can be used to show the Tooltip
},
function() {
 $(this).children(".popup").fadeOut();
});

The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.