Wednesday, June 10, 2009

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://2.bp.blogspot.com/-07EbtWSG3Wo/WV8GOGuzsTI/AAAAAAAAAOQ/7DaWb6rYl_MkOOw-UQYHsaY5r1Xx3f1PwCLcBGAs/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://4.bp.blogspot.com/-XL_6nt-icRg/WV8IZh5ybZI/AAAAAAAAAOk/rilVoLch4noAre1wt67cDeSvzHE0rRGCgCLcBGAs/s320/Help-Site.png" title="<center>Help Site</center>"><img src="https://2.bp.blogspot.com/-07EbtWSG3Wo/WV8GOGuzsTI/AAAAAAAAAOQ/7DaWb6rYl_MkOOw-UQYHsaY5r1Xx3f1PwCLcBGAs/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://2.bp.blogspot.com/-07EbtWSG3Wo/WV8GOGuzsTI/AAAAAAAAAOQ/7DaWb6rYl_MkOOw-UQYHsaY5r1Xx3f1PwCLcBGAs/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://2.bp.blogspot.com/-07EbtWSG3Wo/WV8GOGuzsTI/AAAAAAAAAOQ/7DaWb6rYl_MkOOw-UQYHsaY5r1Xx3f1PwCLcBGAs/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


    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

    <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.

19 comments:

  1. http://www.novatvmedia.com/vvtip

    This uses Very Versatile Electronic Document or VVED. The plugins are a work in progress. I'll complete them once I finalize the framework. I'm going to finish the site when I get some time. I'd love for you to test it. You said you're a novice developer, I would love your feed back on how it compares to Jquery.

    If you're interested, that is.

    ReplyDelete
  2. Hi novatv.stdios!

    Your work on VVED is very interesting! I only briefly looked at your source code, but I think you might like what jQuery has to offer you (check out this demo page). In fact, once you're done your work might make a very nice jQuery plugin :)

    If you would like to discuss this further, please e-mail me; wowmotty (at) gmail (dot) com

    ReplyDelete
  3. Great and simple :)

    I'd make a small modification to display new lines properly:
    // Tooltips
    ...
    this.t = ... this.title.replace(/\n/g,'
    ');


    Regards,
    Zbigniew

    ReplyDelete
  4. In my last post <br> was lost. This is what \n should be replaced with.

    ReplyDelete
  5. Hi Zbigniew! Thanks for the comment! Actually you can include HTML in the title so it is possible to just use a <br>. Also you'll need to escape out the backslash of the \n which I've added to the tooltip script as follows:

    ttt = ttt.replace(/\\n/g,'<br>');

    ReplyDelete
  6. It seems rel="#" doesn't trigger your code for websnapr to generate thumbnail.

    Ed

    ReplyDelete
  7. Hi Edward! Could you please post an example of a link that doesn't work. I tried multiple sites and it worked for me without any problems.

    I just tried this link and it worked for me:

    <a class="screenshot" href="http://stackoverflow.com/" title="<center>Stack Overflow</center>" rel="#">Stack Overflow</a>

    ReplyDelete
  8. Hi Mottie,

    Is there a way to modify the display size of the tooltip for images using the class preview? Right now, the tooltip displays the images which are going beyond the window size on the browser.

    Thanks,

    bunny

    ReplyDelete
  9. Hi Bunny!

    You can limit preview image size using CSS. I think maybe using a max-width might be what you want, so try this:

    #preview img { max-width: 500px; }

    You could also limit the height if your image happens to be very tall

    #preview img { max-width: 500px; max-height: 500px; }

    ReplyDelete
  10. Hi Mottie,

    Awesome.. It worked perfectly!!! Thanks a lot for the help.

    Bunny

    ReplyDelete
  11. Hey there, just one thing missing for me: could you add up the option to display content from other pages? This way you could load up images AND text (or solely text) from separate files... just the last thing for happiness here ;)...

    ReplyDelete
  12. Hi Eno!

    Actually I am in the process of rewriting this script to include loading content from other pages. I should have it done within the next few days! :)

    ReplyDelete
  13. Oh my,

    thanks for your quick reply :). I am eager to hearing from your rewritten script. So far I use two different scripts for the two tasks (displaying img previews/displaying text previews from external files), but would love to incorporate yours for both tasks ;).

    Best

    Eno

    ReplyDelete
  14. Hi Eno!

    I just posted an updated version of this tooltip script which I named Jatt. I hope it has the functionality that you need :). I haven't thoroughly tested everything, so if you find any problems please send me a message.

    ReplyDelete
  15. Hi Mottie,

    will check it out, thanks for reacting so fast :).

    Best

    Eno

    ReplyDelete
  16. Hey Mottie,

    first of all, it seems to come insanely close to what I need, if it's not exactly what I want. Though I got some trouble implementing it. Here's what I wanna do and actually do:

    1. I put the script and the call for the script into one single js-file - should be fine, right?
    2. I want to use a more generic approach for the class attribution - let's say, I want all links to external pages in a certain div named e.g. #main (with an ID) to open up in your shiny new tooltip thingy. Wouldn't I put '#main a' for the tooltip class then?
    3. Same with linked images in another div, let's call it #sidebar a - wouldn't I replace preview with '#sidebar a' to make it work? Or is it restricted to classes (I'm asking since you commented class & ID at that place in the js file)?

    All the best

    Eno

    ReplyDelete
  17. For an explanation: 3. The linked images are actually thumbnails which should enlarge when hovered, hence the trick with '#sidebar a'.

    ReplyDelete
  18. First update:
    1. On your examples, the external content does not work on my end. If I delete anything behind the .html via Firebug it's working.
    2. I am slowly (as a JS noob) working through your script to get it to work. Changed my template so that it works with some generic thing like '.entry a' (any link within a div with the class 'entry'). This might turn out useful for the image thingy as well. The external content already works, so no help needed from your side ;).
    3. If I change the content var to something other than title the tooltips fail to load completely. I think it is connected to the line

    if (opt.content == 'title') { obj.attr(opt.content, ''); }

    I don't need the title behaviour (always want the ext content to load, since my links get a title-attribute via the CMS), so I changed both to 'alt', so it doesn't get in my way.

    Thanks for your cool script ;).

    ReplyDelete
  19. Hi Eno!

    I'm going to respond to your comments/questions in the new post comments since it more directly applied to the new script.

    ReplyDelete