SOURCE CODE: Auto Tooltip for Photo Info
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Auto Tooltip for Photo Info | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured widget Uize.Widget.AutoTooltip"/>
  <meta name="description" content="See how a fancy photo info tooltip can be added for multiple links, where the tooltip's HTML is built using data tucked in the links' title attribute."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="css/rating-stars.css"/>
  <style type="text/css">
    #page-thumbnails {
      margin:auto;
      width:640px;
      padding:5px;
    }
    #page-thumbnails img {
      float:left;
    }
    #page-thumbnails a img {
      background:#fff;
      width:52px;
      height:37px;
      border:solid 1px #444;
      margin:5px;
      -ms-interpolation-mode:bicubic;
    }
    #page-thumbnails a:hover img {
      border:solid 1px #bbb;
    }
    #page-thumbnails br {
      clear:left;
    }

    /*** photo info tooltip ***/
      .photoInfoTooltip {
        display:none;
        padding:0;
        width:119px;
        border:3px solid #fff;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        background:#adbebf url(../images/brushed-metal.jpg) repeat left top;
      }
      .photoInfoTooltip img {
        width:105px;
        height:75px;
        padding:1px;
        margin:0 5px;
        border:1px solid #666;
        background:#fff;
      }
      /*** annotations ***/
        .photoInfoTooltip .thumbnailTitle {
          font-size:11px;
          color:#000;
          text-shadow:-1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, 1px 1px 1px #fff;
          padding:3px 5px 5px 5px;
        }
        .photoInfoTooltip .releaseDate {
          font-size:9px;
          color:#444;
          letter-spacing:1px;
          padding-right:6px;
          margin-top:1px;
          text-align:right;
        }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Auto Tooltip for Photo Info
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/auto-tooltip-photo-info.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.AutoTooltip.html"><code>Uize.Widget.AutoTooltip</code></a> is wired to a set of photo thumbnails, providing decorated tooltips that show additional information about the photos when you mouse over them. The tooltip HTML is generated by a JavaScript template that is tucked into the instance's root node. The array of thumbnail nodes to wire up with tooltips is obtained using the <code>Uize.Dom.Basics.find</code> static method, and is specified by setting the instance's <code>nodes</code> state property.</p>

    <p>The data displayed in the decorated tooltip is extracted from the <code>title</code> attribute of the thumbnail nodes. This allows the data to be present in the HTML, providing several benefits. For one, the data provides relevance hints to search engines that index the page. This a classic example of "unobtrusive JavaScript". The page still provides the informational value if JavaScript is disabled, if the JavaScript breaks, or if it just takes long for the JavaScript to load and wire up the behavior.</p>

    <p>The graceful degradation means that in the worst case the user will see a regular browser tooltip with the information for the photos. To demonstrate this, click on the <b>"UNWIRE AUTO TOOLTIPS"</b> button to unwire the widget. With the widget unwired, mousing over the thumbnails gives you the experience without the auto tooltip behavior - just the regular browser tooltips. To go back to decorated tooltips, click the <b>"WIRE AUTO TOOLTIPS"</b> button.</p>
  </div>

  <!-- node for auto tooltip markup -->

  <div id="page_photoInfoTooltip" class="photoInfoTooltip">
    <script type="text/jst">
      <div class="thumbnailTitle">[%.title%]</div>
      <img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=[%.id%]&max_dim=105"/>
      <div class="releaseDate">[%.date%]</div>
      <div class="ratingStars">
        <div class="ratingStarsEmpty" style="clip:rect(0 100px 20px [%= Math.round (input.rating * 10) %]px);"></div>
        <div class="ratingStarsFull" style="clip:rect(0 [%= Math.round (input.rating * 10) %]px 20px 0);"></div>
      </div>
    </script>
  </div>

  <!-- buttons for demonstrating with and without auto tooltips -->

  <center id="page-buttons" style="margin-bottom: 20px;"></center>

  <!-- grid containing lots and lots of photo thumbnails -->

  <div id="page-thumbnails" class="insetBackgroundColor">
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228109666540948246&max_dim=105"   title="TITLE: Braving the Onslaught | DATE: 2008-06-12 | RATING: 7 | ID: 228109666540948246" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228745103279879745&max_dim=105" title="TITLE: Companion to a Sunset | DATE: 2008-06-12 | RATING: 5 | ID: 228745103279879745" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228866001826566384&max_dim=105" title="TITLE: Concrete Eternity | DATE: 2008-06-12 | RATING: 3 | ID: 228866001826566384" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228321774790917687&max_dim=105" title="TITLE: Corrugate It | DATE: 2008-06-12 | RATING: 2 | ID: 228321774790917687" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228463251413365530&max_dim=105" title="TITLE: Crank It Up | DATE: 2008-06-12 | RATING: 1 | ID: 228463251413365530" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228507796122097730&max_dim=105" title="TITLE: Driving Through the Rain | DATE: 2008-06-12 | RATING: 6 | ID: 228507796122097730" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228267745724726415&max_dim=105" title="TITLE: Flock of Clouds | DATE: 2008-06-12 | RATING: 5 | ID: 228267745724726415" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228937676589416694&max_dim=105" title="TITLE: Hail to the Opening | DATE: 2008-06-12 | RATING: 4 | ID: 228937676589416694" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228483162492178759&max_dim=105" title="TITLE: Heavens Open Over Pedro | DATE: 2008-06-12 | RATING: 9 | ID: 228483162492178759" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228855435929294206&max_dim=105" title="TITLE: Hook in the Wall | DATE: 2008-06-12 | RATING: 7 | ID: 228855435929294206" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228496639998196479&max_dim=105" title="TITLE: Huddling Together | DATE: 2008-06-12 | RATING: 5 | ID: 228496639998196479" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228623703668130129&max_dim=105" title="TITLE: Just a Visitor | DATE: 2008-06-12 | RATING: 6 | ID: 228623703668130129" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228897217554746467&max_dim=105" title="TITLE: Out the Bus Window | DATE: 2008-06-12 | RATING: 4 | ID: 228897217554746467" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228554379238024970&max_dim=105" title="TITLE: Pacifica Pier From Milagra | DATE: 2008-06-12 | RATING: 5 | ID: 228554379238024970" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228550194293355740&max_dim=105" title="TITLE: Pier Before the Storm | DATE: 2008-06-12 | RATING: 8 | ID: 228550194293355740" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228234695931308619&max_dim=105" title="TITLE: Rain Fall | DATE: 2008-06-12 | RATING: 7 | ID: 228234695931308619" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228580091324147918&max_dim=105" title="TITLE: Retirement Home | DATE: 2008-06-12 | RATING: 9 | ID: 228580091324147918" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228074575082103294&max_dim=105" title="TITLE: San Fran Sunset | DATE: 2008-06-12 | RATING: 10 | ID: 228074575082103294" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228118804591686444&max_dim=105" title="TITLE: San Mateo Sunset | DATE: 2008-06-12 | RATING: 8 | ID: 228118804591686444" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228948359037055649&max_dim=105" title="TITLE: Setting Below Clouds | DATE: 2008-06-12 | RATING: 9 | ID: 228948359037055649" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228026937512483785&max_dim=105" title="TITLE: Shadow of the Past | DATE: 2008-06-12 | RATING: 7 | ID: 228026937512483785" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228586025680090150&max_dim=105" title="TITLE: Stacks of Steel | DATE: 2008-06-12 | RATING: 5 | ID: 228586025680090150" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228888824201666423&max_dim=105" title="TITLE: Sun Sets Soon at Sweeney | DATE: 2008-06-12 | RATING: 8 | ID: 228888824201666423" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228484030353525473&max_dim=105" title="TITLE: Sun Through a Tree | DATE: 2008-06-12 | RATING: 4 | ID: 228484030353525473" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228859576507617417&max_dim=105" title="TITLE: Sweeney Ridge Sunset | DATE: 2008-06-12 | RATING: 7 | ID: 228859576507617417" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228620264277935845&max_dim=105" title="TITLE: Trees Meet Sky | DATE: 2008-06-12 | RATING: 6 | ID: 228620264277935845" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228786228006249323&max_dim=105" title="TITLE: Twins | DATE: 2008-06-12 | RATING: 8 | ID: 228786228006249323" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228225341102196754&max_dim=105" title="TITLE: Urban Heavens | DATE: 2008-06-12 | RATING: 9 | ID: 228225341102196754" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228213464916914087&max_dim=105" title="TITLE: Window Lean | DATE: 2008-06-12 | RATING: 5 | ID: 228213464916914087" alt=""/></a>
    <a href="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=500"><img src="http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228734547884666866&max_dim=105" title="TITLE: Windswept and Alone | DATE: 2008-06-12 | RATING: 8 | ID: 228734547884666866" alt=""/></a>
    <br/>
  </div>
</div>

<!-- JavaScript code to wire up the "auto tooltip" and "thumb zoom" behaviors for the photo thumbnails -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.ThumbZoom',
    'Uize.Dom.Basics',
    'Uize.Template',
    'Uize.Widget.AutoTooltip',
    'Uize.Widgets.Container.Widget',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    var thumbNodes = Uize.Dom.Basics.find ({tagName:'IMG',src:/max_dim=105/});

    /*** add the thumb zoom child widget ***/
      page.addChild ('thumbZoom',Uize.Widget.ThumbZoom,{thumbNodes:thumbNodes,imageValidator:null});

    /*** add the auto tooltip child widget ***/
      var photoInfoTooltip = page.addChild ('photoInfoTooltip',Uize.Widget.AutoTooltip,{nodes:thumbNodes,html:true});

    /*** add the buttons for unwiring and wiring auto tooltips ***/
      var buttons = page.addChild ('buttons',Uize.Widgets.Container.Widget,{built:false});
      function toggleButtonEnabledStates () {
        buttons.children.unwireAutoTooltips.toggle ('enabled');
        buttons.children.wireAutoTooltips.toggle ('enabled');
      }
      buttons.addChildren (
        {
          unwireAutoTooltips:{
            action:function () {
              photoInfoTooltip.unwireUi ();
              toggleButtonEnabledStates ();
            },
            text:'UNWIRE AUTO TOOLTIPS'
          },
          wireAutoTooltips:{
            action:function () {
              photoInfoTooltip.wireUi ();
              toggleButtonEnabledStates ();
            },
            text:'WIRE AUTO TOOLTIPS',
            enabled:false
          }
        },
        {widgetClass:Uize.Widgets.Button.Widget}
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>