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.

Visit jQuery Slider to download this demo.
  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>
Using this demo requires two licenses: one for the jQuery Slider and another for the JavaScript Tooltip.
Price: $20 + $20 = $40

More Info