Tuesday, August 24, 2010

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)
    <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://4.bp.blogspot.com/-MJ_JlT9C7Ws/WV8BZNu2VlI/AAAAAAAAAOA/IKMGqvociOQZYJaxR-4hD1Z9_7QZ8f-SACLcBGAs/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://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 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://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="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


    KeyValue (default shown)Description
    direction'n'Choose the direction of the tooltip (in quotes; choose from n, ne, e, se, s, sw, w, nw).
    followMousetrueWhen 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.
    speed300Time in milliseconds for the tooltip to fade in. By design the tooltip has no fade out because it is removed immediately.
    localfalseWhere 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.
    xOffset20Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the X direction.
    yOffset20Number of pixels between the tooltip and the mouse (or object if followMouse = false) in the Y direction.
    zIndex1000Adjust this if the tooltip is below another object.
    livefalseSet 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.

12 comments:

  1. Hi Eno!

    I had to modify the external page loading script slightly, so it should be working now. You'll have to download the latest copy of the script from github. Now to address your other questions/comments:

    1. Putting the script and the call into one file should work just fine, but make sure you add the $(document).ready(function(){...}) to the bottom of the file.

    2. I'm not quite sure what you are trying to do with your external pages. At this time only the tooltip and not the preview or screenshot parts of the script allow you to add selectors after the url. Also you can only have one ID per page, so I'm not understanding what you mean by "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". Maybe if you showed me some code?

    3. In the Jatt code, I commented about class & ID in that the tooltip option - tooltip: 'tooltip', - means that the script will look for all ".tooltip" classes and present the contents of the title attribute (by default) in a div with id "tooltip". So, if you changed the option to main - tooltip: 'main', - then the script will look for the class ".main" and activate the tooltip script on it and show the results in a div with id "main". But the script adds this div with that ID, so it won't put the tooltips into a different div on the page.

    4. Linked images in another div... I'm not quite sure what you mean here either. Some example code would help.

    5. The line below actually does have a bug (which I fixed), but it clears the title attribute to prevent the default browser tooltip from appearing. We don't want it because you can't add any styling to it.

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

    ReplyDelete
  2. Hey Mottie,

    first of all, thanks again for your kind support and your awesome script. I got it all running now as I need it.

    1. Worked flawlessly. ;)
    2./4. I'll give you a rough overview. In certain pages of a project, when you hover over some text links, a "tooltip" should pop up and give you more information the linked text. Also, when hovering over thumbnails in another div, these thumbnails should show the original-sized pic on hover. Like this:

    [div id="main">
    [p>Bla bla bla bla Textlink[/p>
    [/div>
    [div id="sidebar">
    [img src="..." />
    [/div>

    I wanted your script to react on every anchor element that appears within the #main div (for the tooltip thingy) and every link in the #sidebar div (for image preview). With some modifications, I got it to work - though I exchanged the IDs for classes, i.e. [div class="main"> and [div class="sidebar">.

    3. Working ;).

    5. I'll take a look into it, thanks :).

    ReplyDelete
  3. The comment system is a little fishy. I tried to insert code, but it didn't allow for it, so I tried to change it a bit - the anchor-tags still got translated into code, but I hope you are able to detect what I mean :).

    ReplyDelete
  4. Hi Eno!

    Glad to hear you have it all working! Yeah I know this comment system isn't ideal, so if you have anymore questions, just go ahead and email me at wowmotty at gmail.

    I did have one question for you. The script saves the contents that is loaded from the external pages. So if that content, say a feed, changes the tooltip may not reflect that... I guess I could change that to always load, but I wasn't sure if it was needed. Hmmm, maybe I'll add it as an option.

    ReplyDelete
  5. Hi Eno!

    Ok next update... I fixed the tooltip flicker problem if the mouse ended up inside the tooltip. Also, I had to separate out the tooltip, screenshot & preview classes & IDs. Previously, if you changed the tooltip class, it would change the tooltip ID as well.

    This update will break what you already set up, but all you should have to do different is add a period to the tooltip option -> from 'tooptip' to '.tooltip'. I did this because the tooltip ID won't change with different targets like "#main a" - which I think would actually break the tooltip.

    ReplyDelete
  6. Hey Mottie,

    I was quite happy with your script, though it would need some testing on different screen resolutions/browsers etc. for me to be 100% sure.

    I barely had seen any flickering yet, only on text links that were too short (1-2 characters) which is quite self-explanatory. Will check with my current version and see whether I need updating to your latest version (which will include some customisation on my end again ;)).

    As for your question as regards to caching external content - once I reload the page the new content will be loaded again, right, so that I have the updated content in my tooltips? If so, I wouldn't bother for an option to have content refresh.

    All the best

    Eno

    ReplyDelete
  7. Hey Mottie,

    long time since we last spoke. I recently came around to using it in a live project and tested it in IE7. It gives me a 'opt.followMouse is null or not an object'. Since I am a complete JS noobie I wonder if you could help me out on this since it seems to come from your script (here on this page as well, the error)? Thanks again for your massive help ;).

    Best

    Eno

    ReplyDelete
  8. Hi Eno!

    Hmmm, yeah odd... it isn't something blatantly obvious so I'll have to delve into the problem tomorrow. I'll post here when I fix it, but it'd be easier next time if you just e-mailed me at wowmotty at gmail dot com - it's just easier to have a conversation :P

    ReplyDelete
  9. Hi,

    I'm posting this here in case you don't get to your e-mail account too often. It appears you read these posts regularly...

    I just this morning found your "New and Improved JQuery Tooltips" and installed the script on one of my antique radio web sites on this page (http://beta.radioattic.com/radios.htm. It's a great improvement over Alen Grakalic's tooltips in that the tooltips don't wander off the visible browser window. And on this particular page, with over 1,100 links, it isn't cumbersome like the Dynamic Drive tooltips.

    One of my visitors pointed out a problem which I'll repeat here:

    My machine runs XP Pro (SP3) and IE 7 on a high-speed DSL connection. When I access the Radios for Sale page on that machine, I get an IE error prompt: "Stop Running this script? A Script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive. Yes/No".

    If I let the script run, the page reloads, and I get the message again. If I let the script run yet again, the page reloads and the feature works properly, although the thumbnails load a little sluggishly--not terribly slowly, but there is a slight delay upon mouseover.

    I had tested the script on IE8 and FF3.6 with no problems. But when I switched IE8 into Compatibility Mode, I got the same error that my visitor reported.

    I have upgraded to the most current version of Jquery (the "screenshot" would not work correctly until I did), so I should be running exactly what your script is using. I wonder if you had noticed this in your testing, and if perhaps your new & improved Jatt script may work better with the older browser.

    Thanks for a great script! I put it back on my beta site for now.

    I'm trying to test your improved script but haven't gotten it to work yet.

    ReplyDelete
  10. Hi Mottie,

    I have enjoyed working with jatt, it's a great tooltip. Thank you for sharing.

    I have run into a few issues that I was hoping you could help me with.

    1.) How can I use the same class '.tooltip', to call several different ID's 'tooltip, tooltip2, tooltip3, etc'? I need the different ID's for various different design elements. What would the script look like?

    2.) Is it possible to have a delay while hovering before the tooltip shows? Say, 0.5 seconds?

    3.) I have two elements that are side by side, and one of them randomly shows about 10px left of its normal xOffset. Without posting code I was just wondering if you might have an idea what was causing this.

    Thank you,

    Sean

    ReplyDelete
  11. Hi Sean!

    I'm glad you are finding this useful :)

    1) If you want to change the design of the tooltip, did you try changing the metadata? It's a bit of extra work to add the meta-data to each tooltip but you can see how to use it in this demo.

    Maybe a better/easier solution would be to use the "local" option. What that does is attach the tooltip next to the element with the tooltip. It may not work so well if you have a lot of relative/absolutely positioned elements on the page, but it's been so long since I wrote this I don't remember off the top of my head if I tried to compensate for this. Anyway, when you set local to "true", you can then style the tooltip based on the element's wrapper. Given this HTML:

    <div class="block1">
    <a class="tooltip" title="Download it!" href="download.html">Download</a>
    </div>
    <div class="block2">
    <a class="tooltip" title="Read the docs" href="docs.html">Documentation</a>
    </div>

    This css will change the tooltip design (well just color in this example) for each tooltip block:

    .block1 #tooltip { background-color: blue; }
    .block2 #tooltip { background-color: red; }

    Use the option in the initialization code as follows:

    $.jatt({
    local : true
    });

    2) To lenghten the time of the tooltip fadeIn, try increasing the speed option time. The value is set in milliseconds. Initialize the code with the following option (separate options using commas, but make sure there isn't a comma after the last option or IE will break):

    $.jatt({
    local : true,
    speed : 300
    });

    If the tooltip still isn't fading in as you want, then using a different easing function, like "easeInSine" might work better... but ummm, I guess I need to add an easing option LOL... I'll do that today ;)

    3) I can't tell what the problem might be with the two elements, but maybe try setting the "followMouse" option to "false" to align the tooltip around the element instead of based on the cursor position.

    $.jatt({
    local : true,
    speed : 300,
    followMouse : false
    });

    Or use the meta-data to change the xOffset value:

    <a href="#" class="tooltip { xOffset: 10; }" title="tooltip content">Link</a>

    If you have any further questions, please feel free to email me on my gmail account, the user name is wowmotty :)

    ReplyDelete