SOURCE CODE: Generic Auto Tooltip
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>Generic Auto Tooltip | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.AutoTooltip"/>
  <meta name="description" content="See how an HTML info tooltip can be added for multiple links, where the tooltip's contents is built using data tucked into 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"/>
  <style type="text/css">
    .genericAutoTooltip {
      width: 230px!important;
    }
  </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>
    Generic Auto Tooltip
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/auto-tooltip-generic.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 bunch of external links that appear within a discussion of the <b>electronica</b> music genre down below (courtesy of Wikipedia). Each link tag has summary info for the link, tucked away inside the tag's <code>title</code> attribute. When you mouse over the links, the summary info is displayed in a table format inside a tooltip that follows the mouse position. The tooltip HTML for the summary table is produced by an instance of the <a href="../reference/Uize.Widgets.Tooltip.KeysValues.Widget.html"><code>Uize.Widgets.Tooltip.KeysValues.Widget</code></a> class. The set of links 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>Tucking the summary info for the links into the HTML provides relevancy information for search engines that index the page, but also adds value to the page in the case that JavaScript is disabled, if the JavaScript breaks, or if it just takes long for the JavaScript to load and wire up the behavior. To demonstrate the fallback experience, click on the <b>"UNWIRE AUTO TOOLTIPS"</b> button to unwire the widget. With the widget unwired, mousing over the links 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>

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

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

  <!-- copy with links that have data tucked away in their title attributes -->

  <div id="page-sampleCopy" style="margin:0 10%;">
    <p>
      The Norwegian dance duo <a href="http://en.wikipedia.org/wiki/R%C3%B6yksopp" class="externalSiteLink" title="ORIGIN: Tromso, Norway | GENRES: Electronic music, Downtempo, Trip-hop | YEARS ACTIVE: 1998-present | LABELS: Astralwerks | SIMILAR TO: Frost, Kings of Convenience, Those Norwegians, Bergen Wave">Royksopp</a> reached unexpected stardom in 2001 when its debut album <a href="http://en.wikipedia.org/wiki/Melody_AM" class="externalSiteLink" title="RELEASED: December 2001 | GENRE: Downtempo, Ambient, Trip hop | LENGTH: 46:25 | LABELS: Wall Of Sound (UK), Astralwerks / Virgin / EMI Records | PRODUCER: Royksopp">Melody AM</a> became an international bestseller. By 2002 the style had a harder edge and in the UK tracks like "Loneliness" by <a href="http://en.wikipedia.org/wiki/Tomcraft" class="externalSiteLink" title="BIRTH NAME: Thomas Bruckner | BORN: June 12, 1975 | GENRES: Trance | OCCUPATIONS:   Musician, DJ | YEARS ACTIVE: 1994 - present | LABELS: Kosmo Records">Tomcraft</a> hit number One and the following year an electro dance scene emerged in the UK. The release of albums like "New Wave Electro" on Orange Sync Records and Electrotech <a href="http://en.wikipedia.org/wiki/Ministry_of_Sound" class="externalSiteLink" title="TYPE: Public | FOUNDED: 1991 | HEADQUARTERS: London, England, UK | KEY PEOPLE: Jamie Palumbo | INDUSTRY: Music | PRODUCTS: Dance Music CDs, Nightclubs | REVENUE: &pound;136m">Ministry of Sound</a> introduced this style to the clubs with post punk beats, mono Synth breaks which became the formula for the current electro dance scene in the UK.
    </p>
    <p>
      Around the mid-1990s, with the success of the big beat-sound exemplified by <a href="http://en.wikipedia.org/wiki/The_Chemical_Brothers" class="externalSiteLink" title="AKA: The 237 Turbo Nutters | ORIGIN: Manchester, England | GENRES: Big beat, house, trip hop | YEARS ACTIVE: 1992-present | LABELS: Junior Boy's Own, Astralwerks, Freestyle Dust">The Chemical Brothers</a> and <a href="http://en.wikipedia.org/wiki/The_Prodigy" class="externalSiteLink" title="ORIGIN: Braintree, Essex, England | GENRES: Electronic, Rave, Big Beat, Electropunk, Hardcore, Breakbeat, Industrial | YEARS ACTIVE: 1990-present | LABELS: Ragged Flag, Cooking Vinyl, XL, Beggars Banquet, Mute, Maverick, Warner Bros., Elektra">The Prodigy</a> in the UK, and spurred by the attention from mainstream artists, including <a href="http://en.wikipedia.org/wiki/Madonna_%28entertainer%29" class="externalSiteLink" title="BIRTH NAME: Madonna Louise Ciccone | BORN: August 16, 1958 (1958-08-16) (age 49) | BIRTH PLACE: Bay City, Michigan, United States | ORIGIN: New York City, New York, United States | GENRES:   Pop, dance-pop, electronica | INSTRUMENTS: Vocals, guitar, percussion | YEARS ACTIVE: 1982-present | LABELS: Live Nation Artists (current), Warner Bros. (1982-2008), Maverick (1992-2004), Sire (1982-1994)">Madonna</a> in her collaboration with <a href="http://en.wikipedia.org/wiki/William_Orbit" class="externalSiteLink" title="BIRTH NAME: William Mark Wainwright | AKA: William Orbit | BORN: 15 December 1956 (1956-12-15) (age 51) | ORIGIN:   Shoreditch, Hackney | OCCUPATION: Electronic musician">william Orbit</a> on <a href="http://en.wikipedia.org/wiki/Ray_of_Light" class="externalSiteLink" title="RELEASED: February 22, 1998 | RECORDED: May-November 1997 | GENRE: Alternative, Electronica, Techno, Ambient, Dance | LENGTH: 66:50 (Regular album), 72:05 (Japanese edition) | LABELS: Maverick, Warner Bros. | PRODUCER: Madonna, William Orbit, Patrick Leonard, Marius De Vries">Ray of Light</a>. Music of this period began to be produced with a higher budget, increased technical quality, and with more layers than most other forms of dance music, since it was backed by major record labels and <a href="http://en.wikipedia.org/wiki/MTV" class="externalSiteLink" title="LAUNCHED: August 1, 1981 | OWNED BY:   (Paramount/Viacom) | SISTER CHANNELS: VH1, MTV2, MTV Tr3s, Nickelodeon, Spike TV, others">MTV</a> as the "next big thing".
    </p>
  </div>
</div>

<!-- JavaScript code to wire up the "auto tooltip" behavior for the links -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Dom.Basics',
    'Uize.Widgets.Tooltip.KeysValues.Widget',
    '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 linkNodes = Uize.Dom.Basics.find ({root:page.getNode ('sampleCopy'),tagName:'A',className:'externalSiteLink'});

    /*** add the keys-values tooltip widget ***/
      var keysValuesTooltip = page.addChild (
        'keysValuesTooltip',
        Uize.Widgets.Tooltip.KeysValues.Widget,
        {
          built:false,
          extraClasses:'genericAutoTooltip'
        }
      );

    /*** add the auto tooltip child widget ***/
      var genericAutoTooltip = page.addChild (
        'genericAutoTooltip',
        Uize.Widget.AutoTooltip,
        {
          nodes:linkNodes,
          dataKeyTransformer:null,
          tooltipWidget:keysValuesTooltip
        }
      );

    /*** wire up links to open in popup window ***/
      page.wireNode (linkNodes,'click',function () {page.launchPopup ({url:this.href})});

    /*** 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 () {
              genericAutoTooltip.unwireUi ();
              toggleButtonEnabledStates ();
            },
            text:'UNWIRE AUTO TOOLTIPS'
          },
          wireAutoTooltips:{
            action:function () {
              genericAutoTooltip.wireUi ();
              toggleButtonEnabledStates ();
            },
            text:'WIRE AUTO TOOLTIPS',
            enabled:false
          }
        },
        {widgetClass:Uize.Widgets.Button.Widget}
      );


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

      keysValuesTooltip.displayNode ('',false);
  }
);

</script>

</body>
</html>