HTML JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
images
js
.gitattributes
.gitignore
README.md
examples.html
index.html
meta.html
package.json

README.md

Features

  • Dynamic tooltip modifications can be done using metadata (see this demo).
  • Choose the tooltip direction (8 directions: n, ne, e, se, s, sw, w & nw).
  • Tooltip content obtained from selected object attribute, a different object on the same page, or via ajax.
  • Ajax calls can include jQuery selectors to target specific page content.
  • Screenshots of webpages can be obtained through thumbalizr.com or from your own image.
  • Preview & Screenshot images are preloaded.
  • Check out the various demos: main, meta data and more examples.

Dependencies

  • jQuery v1.7+

Usage & Options (defaults)

See more detailed documentation.

Script:

$.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 attaches the tooltip locally; if false, the tooltip is added to the body
  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 that contains the metadata, use "false" (no quotes) to disable the metadata.
  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 : 'http://api1.thumbalizr.com/?width=250&url=', // use your own custom thumbnail service (api string - http://www.thumbalizr.com/apitools.php)

  // 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 (include period ".")
  screenshot     : 'a.screenshot',     // screenshot class (include period ".")
  preview        : 'a.preview',        // preview class (include period ".")
  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      : 'tooltip',          // ID of actual tooltip (do not include the "#" in front)
  previewId      : 'preview'           // ID of screenshot/preview tooltip (do not include the "#" in front)
});

HTML examples (see more in the provided demo pages):

<a class="tooltip {direction:n; width:100px;}" href="http://www.url.com" title="Tooltip Content">Displayed text</a>
<a class="preview {direction:e; text-align:center;}" href="google2.jpg" title="Google's Logo"><img src="google1.jpg" /></a>
<a class="screenshot {direction:e;}" href="http://www.google.com/" rel="#" title="<center>Google</center>">Google</a>

Recent Changes

Only the latest changes will be shown below, see the full change log to view older versions.

Version 2.9.0 (2/17/2016)

  • Core:
  • Code cleanup & use readable variable names.
  • Removed live option and replaced it with jQuery delegated event binding. So this plugin now requires jQuery 1.7+.
  • Prefix triggered Jatt events with "jatt-".
  • Fix image preload code.
  • Add triggered events as options.
  • Fix thumbnail service url.
  • Docs:
  • General cleanup.
  • Added new options.
  • Readme:
  • Renamed with ".md" extension.
  • Moved change log to wiki.
  • Add gitignore & gitattributes.

Version 2.8.6 (9/16/2012)

  • Fixed an issue with preloading a non-existent image. Also from issue #1.

Version 2.8.5 (4/18/2012)

  • Fixed an error that occurrs when no preload images are found. Fix for issue #1.