Documents

Adding the Tooltips

First make sure you have jQuery installed on your site, download the latest version from jQuery. Then add the following CSS and script to your site, or you can download the script here.

Basic setup (add to head of document)

<link href="css/jatt.css" rel="stylesheet">
<script src="js/jquery.min.js"></script> <!-- minimum jQuery v1.7+ -->
<script src="js/jquery.jatt.js"></script>
<script>
  $(function(){
    $.jatt();
  });
</script>

Using the Tooltips

Customizing

$(function(){
  $.jatt({
    // options that can be modified by metadata
    direction      : 'n',     // direction of tooltip
    followMouse    : true,    // tooltip follows mouse movement
    content        : 'title', // attribute containing tooltip text
    speed          : 300,     // tooltip fadein speed
    local          : false,   // if true, the script attachs the tooltip locally & to the body if false
    xOffset        : 20,      // x distance from mouse (no negative values)
    yOffset        : 20,      // y distance from mouse (no negative values)
    zIndex         : 1000,    // z-index of tooltip

    // options not supported by metadata
    metadata       : 'class',               // attribute containing the metadata, use "false" (no quotes) to disable.
    extradata      : 'rel',                 // Change using the rel attribute; stores object id on the page (basic tooltip) or image URL (screenshot)
    activate       : 'mouseenter focusin',  // how tooltip is activated
    deactivate     : 'mouseleave focusout', // how tooltip is deactivated
    cacheData      : true,                  // Cache data obtained from external pages, set to false if the data is dynamic.
    websitePreview : 'https://api.thumbalizr.com/?width=250&url=', // use your own custom thumbnail service api string.

    // Callbacks
    initialized    : null,                  // occurs when the tooltip is called - when hovering over an object
    beforeReveal   : null,                  // occurs when the tooltip is fully formed, but still hidden
    revealed       : null,                  // occurs when the tooltip is revealed
    hidden         : null,                  // occurs when the tooltip is hidden (removed)

    // Messages
    loading        : 'Loading...',          // Message shown while content is loading
    notFound       : 'No tooltip found',    // Message shown when no tooltip content is found
    imagePreview   : 'Image preview',       // image alt message for the image shown in the preview tooltip
    siteScreenshot : 'URL preview: ',       // image alt message for site screenshots, this message is followed by the URL

    // change tooltip, screenshot and preview class - note that all classes have a "." in front
    tooltip        : '.tooltip',            // tooltip class
    screenshot     : 'a.screenshot',        // screenshot class
    preview        : 'a.preview',           // preview class
    preloadContent : '.preload',            // Add this class to preload tooltip content (not preview or screenshot).
    sticky         : '.sticky',             // Add this class to make a tooltip sticky. Only one tooltip on the screen at a time though.

    // events triggered on the document (NEW in v2.9)
    events         : {
      init     : 'jatt-initialized',
      b4Reveal : 'jatt-beforeReveal',
      reveal   : 'jatt-reveal',
      hidden   : 'jatt-hidden'
    },

    // tooltip & preview ID (div that contains the tooltip)
    tooltipId      : 'jatt-tooltip',        // ID of actual tooltip
    previewId      : 'jatt-preview'         // ID of screenshot/preview tooltip

    // REMOVED
    // live        : false                  // use live event support? REMOVED v2.9!

  });
});

Events

$(function(){
  $(document).on('jatt-initialized jatt-beforeReveal jatt-reveal jatt-hidden', function(event, tooltip) {
    var $tooltip = $(tooltip);
    // ignore preview & screenshot tooltips
    if ($tooltip.hasClass('tooltip')) {
      // show HTML of tooltip
      console.log($tooltip.html());
    }
  });
  $.jatt({
    events         : {
      init     : 'jatt-initialized',
      b4Reveal : 'jatt-beforeReveal',
      reveal   : 'jatt-reveal',
      hidden   : 'jatt-hidden'
    },

  });
});

Known Issues