Calendar with hover functionallity

Get Started
1

Hi I have come across this calendar on the bottom right of this website:
http://www.liverpoolfc.tv/

You will have to click on the top left icon to get into the website.

What I Like about it is that you can hover over a date then a speech bubble will appear with the event for that day.

Does anyone know how to achieve this functionallity or how i can get anything close to it? I would like to implement the feature of the user hovers over a date and a speech bubble appears with the event, on my website.

Thanks

2

It looks like they are using jQuery mixed with Ajax. I couldn’t quite determine where their code is from, but it might be a bit complex to use anyway. Just a random search on Google for jQuery calendars produced these:

http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/

http://docs.jquery.com/UI/Datepicker

3

The AJAX toggles the months but for the actual events they have already loaded with the page and are being hidden. Looks like they are tooltips.

4

They kinda screwed it up. I guess, as usual, they couldn’t figure out how to make it work without Javascript, which is just sad.

http://stommepoes.nl/badcalendar.jpg looks like they didn’t discover “overflow”.

It might be too much work to be worthwhile, but our calendars are HTML/CSS and coupled with the back-end to make them dynamic. Here’s my static example, though on my personal site, for my own calendars, I also fixed the little jiggle you see on :hover too.

Basically tables with plain-old CSS tooltips. All the browser bugs that go with CSS tooltips apply.