New and Improved jQuery Tooltips

---

A newer version of this plugin is now available!

---

The guild hosting site that I use recently stopped using the tooltip script from Dynamic Drive's Cool DHTML Tooltip due to it's interference with site functionality. The tooltips are now provided by an easier to use jQuery Tooltip script from cssglobe.com. It's a nice elegant script and very simple to use. But the tooltip goes out of bounds when it reaches the right and bottom edge of the browser window.

After reading through most of the comments on the jQuery Tooltip post and decided the script needed updating. I also wanted this script to still work with the tooltips that were made for the DHTML Tooltip "onmouseover" and "onmouseout" functions. And while working on this script, I added in a few improvements along the way! So here is the result...

jQuery Tooltips v.2:

• Version 2 tooltips behaves like the original DHTML tooltips.
  
  
• They will stay within the browser window at all times.
• You can assign a width to each individual tooltip.
• You can assign a background and text color to each individual tooltip.
  
  
• Version 2 tooltips will work with the DHTML tooltip event actions:
  
  onmouseover="ddrivetip('tooltip content','color','width')" onmouseout="hideddrivetip()"
  
  
• The original jQuery tooltips included image and site preview tooltips. These are now incorporated into this one script.
  
  
• The version 2 tooltips can now have a specific CSS style assigned to them, both in the CSS and for each individual tooltip.
  
  
• You can make the version 2 tooltips display content from a separate location on the page (display the content of any object in a tooltip)
  

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.

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
display:none;
}
</style>
<script src="http://dl.dropbox.com/u/1510510/misc/tooltip.js" type="text/javascript"></script>

Using the Tooltips

• Basic Tooltip
  

  Link (a)	<a class="tooltip" href="#" title="Tooltip (a) Content" rel="100">Link (a)</a>
  Link (div)	<div class="tooltip" title="Tooltip (div) Content" rel="150,#9bff8f;color:#333333;">Link (div)</div>
  	<img class="tooltip" src="IMG URL" title="Tooltip (img) Content" rel="200,#808080;color:black;">
  Link (span)	<span class="tooltip" title="Tooltip (span) Content" rel="250,#008080;color:#dddddd;">Link (span)</span>

  
  
  
  • class="tooltip" (required) - This class activates the tooltip
    
    
  • title="TOOLTIP CONTENT" (required) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML or a pointer to content to display in the tooltip (discussed in the advanced tooltips section). 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="100,#222222;color:#dddddd" (optional) - the rel attribute contains the tooltip width & CSS
    
    
  • The width of the tooltip must be at the beginning of the rel attribute (in red). Do not include the "px" at the end, it is added by the script.
    
    
  • The tooltip CSS follows the width and is separated by a comma. The first hex code "#222222" is for the background color of the tooltip. You can add any additional CSS (in standard CSS format) separated by a semi-colon.
    
    
• Preview Tooltips
  
  

  <a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_MbmvuIXcAIkb321oORrIa-hKZR1cU109fkvi2nPgtIuENriE2MF38U1adLV2ozSVdVDY889yYQe1ESsl0s4XccpAs55TSL7BylQNDCgGUc_oE0YmVyZpG8Au6kbVKclaHFlC4l6Png/s320/Help-Site.png" title="<center>Help Site</center>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif"></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.
    
  • href="URL" (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_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" 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" 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 to your desired 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="URL_SCREENSHOT" 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 do have to take, resize and upload the screenshot image yourself.
  
  *UPDATED (8/29/09)*
  
  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.
  
  
• Advanced Tooltips
  
  

  This Tooltip is from a <div> that is inside a link Hover me	<a class="tooltip" rel="300" title="###tt1" href="#"><div id="tt1" style="display:none">This Tooltip is from a <div> that is inside a link</div>Hover me</a>
  Hover me This tooltip is from a <div> that can be put anywhere on the page	<div class="tooltip" rel="300" title="###tt2">Hover me</div> <div id="tt2" style="display:none">This tooltip is from a <div> that can be put anywhere on the page</div>

  
  
  
  • class="tooltip" (required) - This activates the tooltip
    
    
  • rel="300" (optional) - sets the tooltip width. You can also add CSS as described in the basic tooltip section
    
    
  • title="###tt1" (required) - The title is broken up into two parts: the tooltip object flag and the id of the object whose contents will be shown in the tooltip.
    
    
  • The "###" is the tooltipObjFlag. In the script is set to a default value of "###". So the script will look for this specific pattern in the title. If it finds this pattern, it will then load the tooltip content from the ID that follows the flag.
    
    
  • The "tt1" is ID of the object (a <div> in the example above) that contains the tooltip contents. Each tooltip you add in this way should have a unique ID. So the next tooltip should be "tt2", etc...
    
    
  • So "###tt1" tells the script to load the tooltip from an object instead of the title, and that object has an ID of "tt1".
    
    
  • This was added so you could display content on your site that varies.
    
    
  • <div id="tt1" style="display:none">TOOLTIP CONTENT GOES HERE</div> (required) - This div (or any object like <span>, <table>, etc.) can be located anywhere on the page. It can contain anything inside of it without worrying about quotes, single quotes or embeded video. Note that the style="display:none" must be included so that it won't show on the page (unless you want it to).
    
    
  • If your tooltip content just happens to contain a lot of #'s then you can change the tooltipObjectFlag to anything you want. But you must avoid using the following characters in the flag:
    
    

    . $ ^ { [ ( | ) * + ? \

    Add the new tooltipObjectFlag as follows (replace the text in teal to whatever flag you want):
    

    <script type="text/javascript">
    var tooltipObjFlag = "@@@";
    </script>

Tooltip CSS

You can edit the CSS that is included with the code to modify your overall tooltip look. This CSS should be added into the Footer HTML because GuildPortal added the tooltip CSS after the Custom CSS which makes it override the definitions in the Custom CSS.

• Change the font color by modifying the text (in blue) - color:#dddddd;
  
  
• Change the background color of the tooltip (in blue) - background:#222222;
  
  
• Change the tooltip border thickness, style and color (red and blue) - border: 1px solid #333333;
  
  
• You can remove or change the semi-transparent tooltips by changing the opacity setting. The "filter" is IE specific. Make sure the opacity is a deminal equivalent of the filter opacity ( 0.9 = 90% )
  
  

  opacity: 0.9;
  filter: alpha(opacity=90);

• Additionally you can add a soon to be supported CSS class called border-radius which makes your tooltip have rounded edges. The "-moz-border-radius" is specific to Firefox browsers and is currently working.
  
  

  border-radius: 1em;
  -moz-border-radius: 1em;

  The "1em" means to make the size equal to 100% of the height of the current font size.
  
  
• The last thing you can modify with the script is it's display speed. This really isn't part of the CSS, but I'm lazy and didn't feel like adding another section LOL. The display speed tells the script how long it should take to show the tooltip. Add the following anywhere ABOVE the tooltip.js script link.
  
  

  <script type="text/javascript">
  var tooltipSpeed = 600;
  </script>

  The default speed is 300 milliseconds. You can't use negative values (no going back in time!!) and I wouldn't recommend going above 1000 milliseconds or your site users will begin to hate you.