Tooltips - Jatt (Just another tooltip)

This is an updated version of my other tooltip script. With this version, you can:

• Dynamically modify the tooltip using metadata.
• Set a tooltip direction (8 directions: n, ne, e, se, s, sw, w & nw).
• Tooltip content can be obtained from a selected object attribute, a different object on the same page, or via ajax.
• Ajax calls can include jquery selectors to target specific page content.
• Removed support for the dhtmltooltip script (the code is there, but commented out).

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

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip { width: 250px; }
#tooltip, #preview {
 color:#dddddd;
 background:#222222;
 border: 1px solid #333333;
 padding:5px;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align:left;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 display:none;
}
</style>
<script src="jatt.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.jatt();
});
</script>

Using the Tooltips

• Basic Tooltip
  
  

  basic tip (a)	<a class="tooltip { direction: n; width: 100px; background: #222; color: #ddd; }" href="#" title="Tooltip (a) Content">basic tip (a))</a>
  External page (a)	<a class="tooltip { direction: ne; width: 200px; }" href="http://wowmotty.blogspot.com/2009/06/new-and-improved-jquery-tooltips.html #Blog1_cmt-3390748906554490641">External page (a)</span>
  Object on page (div) Hi	<div class="tooltip { direction: e; width: 150px; background: #9bff8f; color: #333; }" rel="#tip1">Object on page (div)</div> <div id="tip1" style="display:none">Hi</div>
  	<img class="tooltip { direction: se; width: 200px; background: #808080; color: #000; opacity: 1; }" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB6BDlv3S2lwtKXWg7geoqgt0S-d-efE1yluu0NikMlLfjVEFMiq4N_wlTHkPItSGDbT2xPhgvUnIwGsTI0zj9BtKGN8elCL2GTMaRX0NHE-jfjSRtm0sCP_ja9ih3snjzxFNgpuheKA/s320/hideshow.gif" title="Tooltip (img) Content" >
  Link (span)	<span class="tooltip { followMouse: false; direction: s; width: 300px; background: #008080; color: #ddd; }" title="Tooltip (span) Content">Link (span)</span>

  • class="tooltip" (required) - This class activates the tooltip
  • class="tooltip { metadata }" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.
  • title="Tooltip content" (optional) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML but Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='hideshow.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
  • rel="selector" (optional) - If the "title" attribute is empty, the script will look in the "rel" attribute for a selector that points to an object containing the tooltip content (see the "External object (div)" example above).
  • href="page.htm #target span:first" (optional) - If the "title" and "rel" attributes are both empty, the script will look in the "href" attribute for a URL to an external page. The URL can be followed by an id or class selectors pointing to the tooltip contents (see the "External page (a)" example above).
• Preview Tooltips
  
  

  <a class="preview { direction: e; opacity: 1; text-align: center; }" href="URL to full size image" title="Google's Logo"><img src="URL to image thumbnail"></a>

  • class="preview" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.
  • class="preview { metadata }" (optional) - Add any of the predefined options (listed below) or any css style to apply to the tooltip.
  • href="URL to full size image" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.
  • title="TOOLTIP CONTENT" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
  • <img src="URL to image thumbnail"> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.
• Screenshot Tooltips
  
  

  LMYC	<a class="screenshot { direction: e; opacity: 1; text-align: center; } " href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a>
  Google	<a class="screenshot { direction: e; }" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a>

  • class="screenshot" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in light blue)
  • href="URL" (required) - URL of the target website
  • title="Tooltip content" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
  • rel="Website_Screenshot.jpg" or rel="#" (required) This attribute can contain either the URL to the screenshot image of the site to which you have the link pointing. Yes, you will have to take, resize and upload the screenshot image yourself OR you can now use rel="#" to have Websnapr.com generate a thumbnail of the site for you.
  • text or image (required) - Text or image that becomes the clickable link to the site.

Customizing

• Initializing the script (showing all default settings)
  
  

  $(document).ready(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; 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
    live           : false,                 // use live event support?
    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
  
    // change tooltip, screenshot and preview class
    tooltip        : '.tooltip',             // tooltip class
    screenshot     : 'a.screenshot',        // screenshot class
    preview        : 'a.preview',           // preview class
  
    // tooltip & preview ID (div that contains the tooltip)
    tooltipId      : 'tooltip',             // ID of actual tooltip
    previewId      : 'preview'              // ID of screenshot/preview tooltip 
   });
  });

• List of Options
  
  
  

  Key	Value (default shown)	Description
  direction	'n'	Choose the direction of the tooltip (in quotes; choose from n, ne, e, se, s, sw, w, nw).
  followMouse	true	When hovering over the object with a tooltip, the tooltip will follow the mouse if true. If false, it will be positioned relative to the object.
  content	'title'	Attribute containing the tooltip content. By default it is the "title" attribute.
  speed	300	Time in milliseconds for the tooltip to fade in. By design the tooltip has no fade out because it is removed immediately.
  local	false	Where the tooltip is attached. By default it is false and will attach to the document body; if true, it will be attached before the object.
  xOffset	20	Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the X direction.
  yOffset	20	Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the Y direction.
  zIndex	1000	Adjust this if the tooltip is below another object.
  live	false	Set to true if you add tooltip objects to your page dynamically (added after the page is loaded).
  metadata	'class'	Location of the tooltip metadata. By default it will look in the class attribute. If set to "false" it will disable the metadata.
  activate	'mouseenter focusin'	The event that causes the tooltip to display information.
  deactivate	'mouseleave focusout'	The event that causes the tooltip to be removed.
  tooltip	'.tooltip'	The class used to activate the tooltip. And the ID of the actual tooltip.
  screenshot	'a.screenshot'	The class used to activate the screenshot script which shows an image associated with the URL. And this is the ID of both the screenshot & preview tooltips.
  preview	'a.preview'	The class used to activate the preview script which shows the an image in the tooltip from the href.
  tooltipId	'tooltip'	The ID of the actual tooltip.
  previewId	'preview'	The ID of the actual preview/screenshot tooltip (the share the same one).

Known Issues

• Fixed:If the tooltip contents go out of the viewport, the script attempt to adjust the tooltip to make it visible. If it moves the tooltip under the mouse, the tooltip will flicker and become unreadable. This occurs when the east or west direction is used, so limit use of 'east' when the tooltip is near the right side and 'west' when it is near the left. I'll look into fixing this problem in future versions.
• The tooltip script won't obtain cross-domain ajax requests by default, but I have included James Padolsey's cross-domain ajax script (jquery.xdomainajax.js) which should enable it. Just include the script in the head of your document.
• If you find any other issues, please submit an issue to Jatt's github repository.