Demo 3: Show thumbnail details with Tooltip widget

Hovering over each thumbnail in the image slider will display a tooltip window showing details about the thumbnail. Follow these steps to integrate the Menucool tooltip widget with the Thumbnail Slider.

1. Set up the thumbnail slider as described in the Thumbnail Slider
2. Add the tooltip script and styles into the head section of your page

   <script src="5/tooltip.js" type="text/javascript"></script>
   <link href="5/tooltip.css" rel="stylesheet" type="text/css" /><style>
       /* Custom styles for the thumbnail slider: hide text as it 
       is intended for tooltip display only */
       #thumbnail-slider .thumb {
           font-size: 0;
       }
       #thumbnail-slider .thumb h3 {
           font-size: 0;
       }
       /* The following styles are for the tooltip content extracted from the thumbnail slider's markup */
       .tip-wrap {
           background-size: contain;
           background-repeat: no-repeat;
       }
       .tip-text {
           width: 360px;
           margin-left: 240px;
           color: #666;
           background-color: #fff;
           padding: 30px;
       }
       .tip-text h3 {
           margin-top: 0;
           padding-top: 0;
           color: black;
       }
   </style>

3. Add the following script to your page to define the onmouseover event handler for each thumbnail, which will show the tooltip:

   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.

   <script>    
       var slides = document.getElementById("thumbnail-slider").getElementsByTagName("li");
       for (var i = 0; i < slides.length; i++) {
           slides[i].onmouseover = function (e) {
               var li = this;
               var bgSrc = li.getElementsByClassName('thumb')[0]
                             .style.backgroundImage.replace(/\"/g, "'");
               var thumbInnerHTML = li.getElementsByClassName('thumb')[0].innerHTML;
               if (bgSrc && thumbInnerHTML) {
                   var content = '<div class="tip-wrap" style="background-image:' + 
                   bgSrc + ';"><div class="tip-text">' + thumbInnerHTML + '</div></div>';
                   tooltip.pop(li, content);
               }
           };
       }
   </script>