Joomla Bites
Here's a simple jQuery hover effect that can be added to your Joomla site using the HD-Anycode module.
It is similar to a standard "tooltip" but includes a pleasing jquery fade-in effect.
Importantly, it allows you to add hyperlinks to the hover state and (unlike using the old "mouseover" / "mouseout" events) doesn't cause any issues having hover states within hover states (or even hover states within hover states within hover states).
It is created by placing two divs (a visible and a hidden div) within a container div. It is the container div that triggers the hover effect, this is necessary so that the mouse can move over the hover area without escaping the limits of "hover-area".
The hidden div also uses CSS to slightly overlap the visible div (this can be easily repositioned).
Here's the code we included in the HD-Anycode module (it includes loading jQuery, the jQuery code and then the CSS code)...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#hidden').css({opacity:0}); // hide hidden element first
$("#trigger").hover(function() { // if trigger is hovered over
$('#hidden').animate ({opacity: 1}, 250); // reveal the hidden element
}, function() { // if mouse leaves the hover area
$('#hidden').animate ({opacity: 0}, 250);}); // hide the hidden element again
});
</script>
<style type="text/css">
#trigger {display:block; width: 360px; height: 360px;}
#visible {display:block; width: 360px; height: 235px;}
#hidden {display:block; width: 260px; padding: 20px; padding-top: 40px; margin-left: 60px;height: 110px; position:relative; top: -60px; background-image: url('speech-bubble.png');}
</style>
And here's the HTML code that we included in the article...
<div id="trigger">
<div id="visible"><img src="/churchill.jpg" width="360" height="235" /></div>
<div id="hidden">This is composed of TWO divs within a container div. jQuery is used to apply the hover effect and CSS is used to overlap one div over the other. The code is added using the free <a href="#">HD-Anycode</a> module.</div>
</div>