Quote from: Dimmy at Jun 11, 2008, 03:40 AM
how did you do the hove tooltip parts at the bottom of the page?
Er ... that bit was done a bit quickly ... so quickly that we actually disabled it in the IE stylesheet (the background was coming through). So this likely isn’t the best way to do it, but it worked (kinda) for us ...
So we use Ditto to list the latest articles. The template ditto uses outputs each article something like this:
<li><a href="[~[+id+]~]">[+pagetitle+]</a>
<div style="display: none;">[+introtext+]</div>
</li>
The stylesheet also hides that <div>, but I like to do it inline as well.
In the stylesheet, the <li> has
The <div> includes these declarations:
position: absolute;
width: 130px;
left: 140px;
bottom: 0;
That sets the <div> box at the same height as the <li> item, 140px to the right. (Because it’s an absolutely-positioned child of the <li>, it’s position is relative to the <li>).
The you need to fire an event when mousing over the <li>. I use jQuery to do that.
$j('div#goodness div li a').hover(
function () {
$j(this).parent().find('div').fadeIn();
return false;
},
function () {
$j('div#goodness div li div').fadeOut();
return false;
}
);
Don’t think I’m explaining myself very well, but I hope this is helpful! Let me know if I can explain any of this better.
Cheers
Matt
Some nice styling as well, good job.
