Demo 5: Show thumbnail details with Tooltip widget

Hovering over each thumbnail in the image carousel will launch a tooltip window displaying the details of the thumb. The followings are the steps to integrate the Menucool tooltip widget with the jQuery slider.

1. Set up the thumbnail carousel as instructed in jQuery Slider
2. Add the Menucool tooltip JavaScript and CSS links into the head section of the page <link href="5/tooltip.css" rel="stylesheet" type="text/css" /> <script src="5/tooltip.js" type="text/javascript"></script>
3. Add the following script into the page that defines the onmouseover event handler for each thumbnail to show the tooltip: <script> //Note: this script should be placed at the bottom of the page, or after the slider markup. It cannot be placed in the head section of the page. var slides = document.getElementById("thumbnail-slider").getElementsByTagName("li"); for (var i = 0; i < slides.length; i++) { slides[i].onmouseover = function (e) { var li = this; if (li.thumb) { var content = "<div class='tip-wrap' style='background-image:url(" + li.thumbSrc + ");'><div class='tip-text'>" + li.thumb.innerHTML + "</div></div>"; tooltip.pop(li, content); } }; } </script>

More Info

• Full documentation: jQuery Slider
• Questions & Answers: Posts in the forum