Slider with Tooltip for blogger

Slider with Tooltip

HTML Content

This slide shows that HTML/Text can also be used as thumbnails

Demos: 1234

Hovering over each thumbnail in the slider will launch a tooltip window that can display any HTML content.

The source code of this demo is the demo4.html that you can download from the jquery Slider page.

Steps to integrate Menucool Tooltip widget with the Thumbnail Slider

1. Set up a Thumbnail Slider as instructed in page jquery Slider
2. Add the Menucool Tooltip JavaScript and CSS links into the head section of the page
   <link href="themes/4/Tooltip.css" rel="stylesheet" type="text/css" /> <script src="themes/4/Tooltip.js" type="text/javascript"></script>
3. Add onmouseover event to each thumbnail for showing the tooltip:
   <div id="mcts1"> <img src="images/thumbnail-slider-1.jpg" onmouseover="tooltip.pop(this, 'This is the first slide')" /> <img src="images/thumbnail-slider-2.jpg" onmouseover="tooltip.pop(this, '#tip2')" /> <img src="images/thumbnail-slider-3.jpg" onmouseover="tooltip.pop(this, '#tip3')" /> ... ... ... </div>

   // You just need to pass in the element ID starting with "#", tooltip.pop(this, '#tip2'). // The element of "#tip?" contains the tooltip HTML content on the page. You can view the source code of demo4.html for details.

There you have it!

It is recommended to use the source code of demo4.html that you can download from page jQuery Slider for a quick setup.

Using this demo requires two licenses: one for the slider and another for the tooltip.
($20 + $20 = $40).

More Tips & Tricks