clueTip Plugin Beta

read 49 comments

If you're a member of the jQuery discussion list, then you probably already know that I've been working on an ajax tooltip plugin, inspired by Cody Lindley's jTip plugin. Well, I'm finally ready to officially introduce it (even though Smashing Magazine somehow found out about it and included it in their list of 40+ Tooltips Scripts).

The new clueTip plugin allows you to easily set a link, or any other element, to show a tooltip when the user's mouse hovers over it. If the link includes a title attribute, its text becomes the heading of the clueTip.

The contents of the clueTip can come from a separate file via AJAX, an element on the current page when set to "local," or the title attribute with a designated delimiter.

Continue Reading Below

The clueTip offers smart positioning and takes advantage of Brian Cherne's fantastic hoverIntent plugin if it's available. (Just include it in a <script> tag if you want the clueTip to use it.)

It comes with many options, all of which are documented in the source comments and on the demo page.

Using the clueTip Plugin

To use the plugin, add references to the jQuery source file, the Dimensions plugin, and clueTip itself in your page's <head>. You can optionally include the hoverIntent plugin as well. Finally, you'll need to include your custom script file. So, it'll end up looking something like this:

<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="/scripts/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="/scripts/jquery.cluetip.js"></script>
<script type="text/javascript" src="/scripts/your-custom-script.js"></script>

Your custom script is where the magic happens. Here is what the code looks like for the three clueTips in the previous paragraphs (hover over the links with dotted bottom borders):

JavaScript:
  1. $(document).ready(function() {
  2.   $('a.basic-clue').cluetip();  
  3.   $('a:contains(options)').cluetip({width: 520, sticky: true});
  4. });

Since the first two links above have a class of "basic-clue," they get the basic clueTip (line 2). The third one, which contains the string "options," gets a custom clueTip with a width of 520 pixels (line 3). Also, because the sticky option is set to true, its clueTip won't be removed until the user clicks on the "Close" text.

More Examples

Here are four more variations on the clueTip theme, just to give you an idea of what you can do: 1) Give the rel and href attributes different values, so the first is used on hover for the clueTip and the second is used on click for taking your there: jquery.com. By the way, it's a good idea to set the sticky option to true if you know the clueTip will have links in it. Otherwise, the user won't be able to get to those links.

The HTML is as simple as this: <a class="sticky-clue" rel="/cluefiles/blurb.html" href="http://jquery.com">jquery.com</a>. The jQuery is simple:

JavaScript:
  1. $(document).ready(function() {
  2.   $('a.sticky-clue').cluetip({sticky: true});  
  3. });

2) Assign the clueTip to a <span> element and populate the whole thing from its title attribute. For kicks, add a hoverClass: Show me the clueTip!

The HTML for it looks like this: <span title="clueTip heading,all of this beautiful text,is taken from the title attribute">Show me the clueTip!</span>

And the jQuery looks like this:

JavaScript:
  1. $(document).ready(function() {
  2.   $('span[title]').cluetip({
  3.     splitTitle: ',',
  4.     hoverClass:'highlighter'
  5.   });
  6. });

3) Activate the clueTip on click and use <div id="local-clue"> on the current page for the clueTip content:

you must click me to activate me

Here is the HTML: <a class="local" href="#local-clue" title="click to open/close clueTip">you must click me to activate me</a>

Here is the jQuery:

JavaScript:
  1. $(document).ready(function() {
  2.   $('a.local').cluetip({
  3.     local: true,
  4.     attribute: 'href',
  5.     activation: 'click'
  6.   });
  7. });

4) Assign a clueTip to an img with an id of clue-image, using the alt attribute for the clueTip's title and the longdesc attribute for the AJAXed-in clueTip body. (Side note: I've always wanted to use the longdesc attribute. This is like a dream come true.) Make the clueTip "sticky" and put a custom "close" image at the bottom of it. To top it off, grab an XML file and process it. Try it out:

The HTML: <img id="clue-image" src="/images/boy-wonder.jpg" alt="The Boy Wonder Rides" longdesc="/cluefiles/heroes.xml" />

And the jQuery:

JavaScript:
  1. $(document).ready(function() {
  2.   $('#clue-image').cluetip({
  3.     width: 380,
  4.     attribute: 'longdesc',
  5.     titleAttribute: 'alt',
  6.     sticky: 'true',
  7.     closeText: '',
  8.     closePosition: 'bottom',
  9.     ajaxProcess: function(data) {
  10.       var html = '';
  11.       $(data).find('hero[firstname=Ben]').each(function() {
  12.         var $hero = $(this);
  13.         html +='';
  14.         html += '<p>' + $hero.attr('firstname') + ' loves to ' + $('activity', $hero).text() + '</p>';
  15.       });
  16.       return html;
  17.     },
  18.     ajaxSettings: {
  19.       dataType: 'xml'
  20.     }
  21.   });
  22. });

There are many other things you can do with your clueTips. And you can change the default styles located in jquery.cluetip.css. Play around and have fun!

What's Next

Your feedback is most welcome. I'll be adding clueTip to the new jQuery plugin repository within the next few weeks, but I'd like to make sure it works well for others before I do. If you spot any bugs or want me to add a feature, you can post a comment below or on the jQuery discussion list/ Google Group.

Here are some download links to get you going:

ClueTip

  • clueTip files in jQuery's SVN repository : includes jquery.cluetip.js, demo files, and all dependencies. Not recommended. See the Update below.
  • clueTip demo on learningjquery.com

Dependencies

  • Dimensions Plugin
  • jquery.js : only needed for jQuery versions 1.2.4 and below
  • hoverIntent Plugin (optional) on Brian Cherne's web site : includes demos and source file.
This kind of clueTip could be used for a footnote. With JavaScript off, it would just show up in its original place.

Update

This plugin is a work in progress, in case you couldn't tell. I've changed it a lot since posting this entry, so please refer to these pages from now on:

  • clueTip Project Page on GitHub. You can grab the latest release and file bug reports there.
  • clueTip Info & Demo Page. You can take the plugin for a spin and learn how to use it there.


comment feed

49 comments

  1. jamjammo

    I think I would most likely use the bottom method, as photo gallery script type thingie.

  2. I'm trying to get thickbox and cluetip to work together, but I can't seem to figure it out. I'm using the 'local' and 'sticky' attributes. Within the cluetip are links to external pages that I'd like to be opened on the same page with thickbox. Do you know of any way to make this work? I'm open to other suggestions if anyone wants to offer them. Thanks for the great plugin!

    • gullbyrd

      I got cluetip to work with thickbox when loading the cluetip from an external file, but it took a little hack. Here's the thing: apparently if you're loading an external file the file doesn't load normally, so you can't use document.ready() or anything similar to initialize the links. In fact, the cluetip doc acts like part of the underlying doc... you can call javascript functions on the original page from the cluetip doc, which seems odd.

      Anyway, once the external file is loaded, you can initialize the links. But how can you tell that the file is loaded? My hack was to put an init call in the onmouseover event of the link I wanted to initialize. I actually called a function on the underlying page that in turn called "tb_init('a.thickbox')". Even though the thickbox link was on the external page, rather than the page in which the call was made, it worked.

  3. This is fantastic. Is there an example for #4, the one with the image in the cluetip box?

  4. Justin

    Hey, Karl
    Great work! I'm loving clueTip. It's saving a lot of time being able to use "local" content. I do have a question though. How do you get it to work on an area for an image map? Currently it flickers on and off at the top left of the image (in firefox anyway). I'm working on a hot project and getting a solution for this would be VERY helpful. Thanks!

    J

  5. Justin

    I just noticed another issue, Karl. My page has a Flash animation in the header and for some reason, when you mouse over one of the image map links for the tooltip the Flash content starts over. Any thoughts on that?

    J

  6. Mitchell, if you hover the mouse over the photo of the boy long enough, you should see the clueTip appear. Admittedly, there is too much lag there, especially with a slow connection. I'll be releasing beta 2 tonight or tomorrow, which will show a "loader gif" until the content is successfully retrieved.

    Justin, I'm terrible at dealing with Flash problems, but I'd be happy to take a look at both issues you're having. Do you have a URL that I can see? If you don't want to publish the URL in the comments here, feel free to use the contact form.

  7. FYI, everyone. I worked with Justin through email and came up with a solution to his problem with the image maps. The fix is now in the plugin code.

  8. Nir

    Thanks a lot for this amazing tooltip!

    I have A request...
    Can you add the functionality that keep the tool tip on the screen and only disappear when we move out from the tooltip box.

    I think it was Bruno Goyanna who solved it on your previous jTip project.
    (http://www.learningjquery.com/2006/10/updated-plugin-jtip#comment-5044)

    Thanks A lot for the great help you provide on the web.

  9. vandal

    When I use more than one tooltip in a page, and If i over tooltip links one by one then for slow connection shows me previous tooltip's contents(title and inner data).

    Any comments or suggestions?

  10. Milton

    Karl-

    I'm having the same type of problem Justin had; I'm using the JW FLV Player, and anytime cluetip pops up its Jtip-styled on hover, the FLV player either starts the video over, or skips to a strange place in the video timeline...

    I downloaded the plugin after your July 22nd posting. The bug doesn't occur in Safari for Mac or IE 6 for windows, but in Firefox, both platforms, it has this issue.

    One thing I haven't tried yet is using the jquery method of referencing the FLV player (right now, I'm just using the standard FLV javascript within the webpage itself) - so, I'm hoping that using jquery for the FLV reference will fix the problem... do you think this has any chance of fixing the problem, or is it something more complex?

  11. Hi Milton, one thing that has worked for Justin and others is to append the clueTip to a relatively positioned wrapper div rather than to the <body> tag. You can do that with the latest version (0.9). Just add this line inside your $(docment).ready() and before your lines containing .cluetip():

    $.cluetip.setup({insertionElement: '#wrapper'});

    You'll need to change "#wrapper" to whatever your wrapper div is named.

    Hope that helps.

  12. John

    Is there anyway to pass php variables on the hover. I have a link that has an rel of "map.php?cat_id=3". This page works fine if you just go to it, it basically is using the google maps API to select clients that have a cat_id of 3.

    I couldnt get the page to load at all (I would get an 'error loading contents' on the bottom so i added the data-type function and instead of xml or html i put in 'php'. Now the page will load, but only the html portion of the page (the header). None of the google maps is showing up because no variable is getting passed through. Any suggestions?

    btw i am using mysql database to store all my information.

  13. John

    After some more testing i was actually wrong. The php variables are getting passed to the page. I can echo out cat_id and it displays 3. The problem seems that no query is getting executed. I made a simple test sql statement and tried to echo it and nothing came up. Any ideas on how to get the php to query the database? Maybe make the page wait to display until all queries are executed (normally the page will take 2-3 seconds to load because of the amt of queries i need to execute. The hover link displays the html instantly which makes me think there is not enough time to execute anything).

    -John

  14. Massimiliano Balestrieri

    just one thing...

    //[...]
    $cluetip.css({backgroundPosition: bgPos});
    $cluetip.bgIframe();//include bgiframe js

    no?

    WONDERFUL WORK
    bye max

  15. Karl, I am still having the same problems where the Flash viewer dissappears and restarts once any cluetip action is activated. I tried to put the change:

    jQuery.cluetip.setup({insertionElement: '#wrapper'});

    into my onReady function but it didn't seem to work. Is there something I am missing? BTW, what does the insertionElement do?

    Thanks in Advance...

  16. Hi Anish,

    I turns out that this problem has to do with setting height or width on an element when its parent doesn't have a position defined. If in your stylesheet you can set position: relative to body or #wrapper or whatever other element you want to append the clueTip to, that should fix the problem.

  17. Anish

    Thanks Karl. It looks liked that worked for the video but now I am getting another problem where when I roll-over the item the clue-tip is showing up about 100 pixels right of where it initially was before the position change. I am using positionBy: 'mouse' for my clue-tips so i should expect it to be near the mouse but it is not. Can you help?

    Great module, btw...

  18. Paul

    FYI, everyone. I worked with Justin through email and came up with a solution to his problem with the image maps. The fix is now in the plugin code.

    I am having trouble getting the cluetip to show as well. Would you mind sharing the solution you came up with Justin?

    Thanks

  19. Rob

    I have the same issue as Paul regarding image maps. Can you please post an example?
    Thanks.

  20. Rob

    I got it working with image maps. Great plugin! Hope this helps someone else out.
    - Rob

    jQuery code:

    
    $(document).ready(function() {
        $('area.tips').cluetip({
            splitTitle: '|',
            arrows: true,
            dropShadow: false,
            cluetipClass: 'jtip'
        }) ;
    }) ;

    HTML

    
    <map>
        <area shape="rect" 
            coords="269,432,277,440"
            href="link.html" 
            alt="my alt tag"
            title="Title|Content"
            class="tips" />
    </map>
    
  21. my image magic working but not working if i'm using explorer can someone help

  22. Hi, used the map technique with ids

    But seems that the default shape doesn't create cluetips.


    <area shape="default" href="#" alt="" class="tips" rel="#siege" title='my title' / >

    any hint ?

  23. Jon

    I'm having troubles with getting the cluetips to appear, specifically just with the area tag.
    In my attempts, the problem occurs in IE 6 and 7 (works fine with firefox/safari).
    From the looks of thing's I don't seem to be the only person experiencing difficulties. So has anyone found a solution or a workaround for this?

    My code looks like this:

    <script type="text/javascript">
    $(document).ready(function(){
    	$('area.projects-s').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true, width: 275});
    	$('area.projects-m').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true, width: 350});
    	$('area.projects-l').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true, width: 425});
    });
    </script>
    
        <div id="map">
            <img src="map_page_test.jpg" border="0" usemap="#Map" />
    	<map name="Map" id="Map">
                <area shape="rect" class="projects-s" coords="458,249,471,263" href="ajax1.htm" rel="ajax1.htm" />
                <area shape="rect" class="projects-m" coords="489,298,502,312" href="ajax2.htm" rel="ajax2.htm" />
                <area shape="rect" class="projects-l" coords="462,327,475,342" href="ajax3.htm" rel="ajax3.htm" />
                <area shape="rect" class="projects-s" coords="507,342,519,356" href="ajax4.htm" rel="ajax4.htm" />
                <area shape="rect" class="projects-l" coords="475,393,489,408" href="ajax5.htm" rel="ajax5.htm" />
                <area shape="rect" class="projects-m" coords="555,413,565,425" href="ajax6.htm" rel="ajax6.htm" />
            </map>
        </div>
    
  24. KLaus

    Hi,
    is it possible to load content of external file for a link preview?

    thanks
    Klaus

  25. Antreas

    Hi all thanks for this wonderfull plugin.
    I have a problem trying to make it load content from a php page. Basically i have the same problem as John in posts 12 and 13. I can't get it to call a php page which queries a database and shows the results. Only the static parts of the php page called are shown. Have anyone found a solution about this?
    Thanks.

  26. Hi Antreas,

    What you need to do to pass a variable to the PHP page is to use the ajaxSettings clueTip option, which is just a surrogate for $.ajax(). So something like this should work:

    $('someelements').cluetip({
        ajaxSettings: {   
            dataType: 'html', // <-- change this if a different  data type is being returned
            data: "name=Karl&location=Siberia"
        }
    });

    You can read more details about the ajax method and see more examples of the data option in the jQuery documentation.

    Hope that helps.

  27. Antreas

    karl it worked like a charm. thanks man you are a life and time saver. :-)

  28. mmalaka

    I tried this for the Image Map on the Area tag and still it is not working, I can not see the tooltip I can only see the standard one...

    Any advice

  29. Blake

    Has anyone had any luck getting image maps to work in IE6 or IE7? I'm basically having the same problem as Jon.

  30. Ryan

    Hi,

    I'm a newbie and would like to ask for help, I have a code that works in FF but in IE6+ I have to hover twice just to get the tooltip to work, here is a sample of my code.


    $(document).ready(function() {
    $('a.tooltip').cluetip( { showTitle: false, tracking: true, width: '400px', hoverIntent: { sensitivity: 1, interval: 1, timeout: 0 } } );
    });

    and a dynamic id


    <a rel="tipinfo.php?id=
    <?php echo $id; ?>" href="showitem.php?id=<?php echo $id; ?>" class="tooltip" > INFO </a>

    Any help will be greatly appreciated.

    thanks.

  31. Adrian

    I really appreciate the functionality of this plug-in and integrated it into a jquery-driven website. As it turns out though, it loads incredibly slowly (tested on IE6/7, FF3). The tooltip itself is very responsive.

    The main jquery function F(); takes a whooping .5 seconds if cluetip is in use, and less than a tenth of that without it. This is unacceptable for any website with regular traffic.

    I use it on items in the table. It was that slow with even 3 table rows, so this is not a quantitative issue.

    I hope there's a work around as it's difficult to find a suitable alternative (css styling, AXAH)

    Thanks,
    Adrian

    • Hi Adrian,
      Thanks a lot for the feedback. Any additional information would be much appreciated and would help me to help you track down the problems you're having. Which version of the plugin are you using? Do you have a page up somewhere so I can take a look at what's going on? I haven't experienced or heard of any such loading issues with clueTip unless the page contained a hundred or more elements bound to it.

      • Adrian

        Hi Karl,

        forget the part about 3 rows being equally slow, i checked and that was another plug-in. I tried about 10 and am starting to lose the oversight.

        I just experimented with various amounts of rows and that's in fact the driving speed factor with cluetip.

        $("td.myclass").cluetip();

        Here the firebug profiler (FF3), showing the most used function, uncached each run:

        5 rows (1 td.myclass in each):
        data() 183(calls to function) 94%(of time of all javascript) 365ms (sum of all calls) 20ms(longest single call) -- jquery_dev.js (line 1275)

        25 rows:
        data() 743 97% 1880ms 272ms

        250 rows:
        data() 7043 97% 15000ms 352ms

        So it's the issue you mentioned it seems.

        Do you know of any way to circumvent that, or is this a mathematical issue that cannot be easily solved? Could i maybe call cluetip via onmouseover within the html document or is it required to be bound via jquery prior to usage?

        It looks and works so great once it's loaded, it would be a shame to go back to the browser native title attribute as a tooltip.

        • Hi Adrian,
          The problem as to do with binding event handlers to multiple elements all at once. Typically the way to get around this is to use event delegation, but unfortunately this plugin doesn't really support that. You're on the right track with your idea of calling cluetip via onmouseover, but I would do it one table row at a time. It'll get tricky if you're trying to attach cluetip to actual table cells, but if you attach it to something within the cell and there is a little padding in between, it should work just fine.

          I put together a little demo for someone else. I'm sure you can modify it to suit your own situation.
          plugins.learningjquery.com/cluetip/demo/lazyload.html

          Edit: Actually, this solution does use event delegation. I was thinking of something else while typing my reply and only looked at my solution after I was finished typing. Let me know if you need any additional help with this.

        • Adrian

          Hi Karl,

          thanks for your help, sorry i couldn't get back to you earlier.

          The demo you linked to somewhat works. Unfortunately it's learning by doing from me at the moment; i'm a novice when it comes to working with the DOM in javascript.

          The structure i have on my website is:

          <table>
            <tr>
              <td>
               (<div class="container">)
               (<div>)
                <img title="icon" /><img title="icon2" />
               (</div>)
               (</div>)
              <td>
            <tr>
          </table>
          

          The <img> tag(s) need to have very little margin/padding within the <td>by design; it's a large table that needs to be as compact as esthetically doable.

          Working code from your demo, <a> replaced by <img>:

          $('.container').bind('mouseover', function(event) {
            $div = $(event.target).closest('img');
            if (!$div.data('clueTipLoaded') && !$div.is('.container')) {
              $div.find('img').cluetip({local: false, attribute: 'rel'});
              $div.data('clueTipLoaded', true);
            }
          });
          

          You said binding to table elements could be tricky. Does that mean replacing
          <div class="container"><div><img /></div></div> with
          <tr class="container"><td><img /></td></tr> where <img /> triggers cluetip or <table class="container"><tr><td><img /></td></tr></table> where <td> triggers cluetip can't work?

          p.s. i don't want to waste your time here, so i fully understand if you can't walk me through it.

        • Adrian

          p.p.s no idea how the whitespace made it into the pre tag, feel free to remove it.

  32. Steve S

    Hi there,

    I really like this plugin and it integrates really well into my site. But I'm having two issues, which I can't seem to resolve:

    1) The rounded style looks fine in Firefox, but not in IE7. (I haven't tried IE8 yet). The code title portion of the tip overlaps the content portion.

    Here is how I create the tip:


    $j('img.tips').cluetip({cluetipClass: 'rounded', dropShadow: false, arrows: true, sticky: true, activation: 'click', closePosition: 'title', closeText: ''});

    2) If I use an image for the closeText, it seems like only a very small portion is clickable. The rest of the image does not respond to the close click event. The example on the page above outputs a different structure - the cluetip-close is a div element in v1.0.3 of cluetip, whereas in the demo above it's a span tag.

    If you can offer any assistance I'd greatly appreciate it. My site is not yet open to the public, but if you would like to take a look please let me know and I can provide access.

    Thanks,
    Steve

    • Steve S

      Hi there, I resolved these issues. I believe there are some issues with the rounded rules in the stylesheets. mostly, the way the padding is defined for the title element was causing issues. Once I fixed that, everything fell into place.

  33. Dom M

    Hello,
    Plugin works great every time I have used it except one - with the area tag in an image map. The cluetip shows up perfectly except that the smart positioning doesn't seem to work with areas close to the each of the page i.e. instead of moving to the left of a hotspot on the right of the page the cluetip shows up partly or all off the right of the page (and therefore widens the page).

    Code is:

    
    $(document).ready(function() {
      $('area.pop').cluetip({
      	showTitle: false,
    	cursor: 'pointer',
    	width: 308,
    	positionBy:	'mouse'
      });
    });
    

    Html is:

    area shape="circle" coords="825,519,6" href="#" rel="previews/11.html" class="pop"

    I see someone else has had the same issue -

    http://plugins.jquery.com/node/8013

    Any thoughts?

    Thanks.

  34. Per

    I have tested many ways of passing variables true query string dynamically(update the same "rel" link several times), I still not get any stable solution that works 100%, I maby get it right 6 times if I'm lucky but the 7th it will show the wrong data variable (the previous one). If there are no solution maby its possible you can you give me a tip on how I can re-verify that the x variable are the correct one before its actually being sent. I have also try changing the anchor points id along with the change of the variable but with the same negative result.


    ajaxSettings: { dataType: 'aspx', data: 'n=' + x }

    Any clue how I can solve this?

    • Hi Per,
      Not sure which version you're using, but grab the one on GitHub and add ajaxCache: false to the options object when you call .cluetip(). That should help.

      • Per

        Actally I didn´t use the laitest, but this time I am.

        * jQuery clueTip plugin
        * Version 1.0.5 (August 22, 2009)

        I still got the same problem, it cind of flips back from the correct one to the previous one as well.
        Here is the code, so if you need to try it out. For me its very portant to get 100% accuracy.

        if ($('#i1' + "[src$=noinfo.gif]")) {
        $('#i1').attr({ src: "info.gif" });
        $('#i1').attr({ 'class': "Enable" });
        }
        $('[id^=a1]').attr({ id: 'a1-' + x });
        $('#a1-' + x).attr({ dataType: 'aspx', rel: 'PopupInfo.aspx' }).cluetip({ cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, ajaxSettings: { dataType: 'aspx', data: 'n=' + x }, onActivate: function(e) { if ($('#i1').attr("class") == "Enable") { return true; } else { return false; } } });

  35. jarome

    hi,my aspx dynamic page using cluetip works in ie is ok,but in the firefox it notices 'sorry, the contents could not be loaded'

  36. Peter

    hi there,
    i try to rebuild one of the examples in my application.
    for testing i want to show one of the examplte html pages "ajax.html". the clue tip opens, the title is correct, but no body. just one empty line is shown.
    any idea what i do wrong?

    the htmls looks like this:
    &lt span title="202180" rel="http://github.com/kswedberg/jquery-cluetip/blob/master/demo/ajax.htm" href="#" class="kdtips"&gt Schlecker &lt/span&gt
    the jquery part:

    
    $(document).ready(function()
    {
      $('.kdtips').cluetip(
      {sticky: false,
       arrows: true,
       width: 380
      });
    });
    

    any clue ist welcome
    peter

  37. Ash

    Hi

    I am using this great plugin for image maps, thing is, I'm using tracking = true and position to mouse..

    It's a little glitchy... The tip doesn't seem to load up where the mouse actually is...

    heres a link...

    http://localhost/__TOAST/PAGES/june28/style_stories_page1.php

    Any ideas why this might be?

  38. Tsiki

    Hi.
    I'm trying to open a cluetip upon hovering over a table row. how can this be done?
    thanks

  39. John

    Hi Karl

    I have 4 main categories which list all the sub categories underneath them dynamically. When someone hovers over the sub category link, a tool tip should appear and list dynamically the products listed in that sub category. The site is built in coldfusion, the tooltip is populated via ajax, it calls for the cat-load.cfm page.

    The problem is that i need to pass 2 variables through to the cat-load.cfm page, one is the cat_type_id and the other is the cat_type_desc_id. I looked at your sample code above for antreas (Q .26) , i tried it but i need to do the same thing for all four categories, please could you show me an example for 4 dynamic urls that should go in the 'ajaxSettings:' code and if i need to make the link for the tooltip look something like this:

    a class="tips" href="cat-load.cfm?cat_type_id=#variable#&cat_type_desc_id=#variable#" rel="cat-load.cfm" title="Products"

    is that the correct place to pass the variables or should they go on the js page for the tooltip.

    Thanks

  40. jeanmarie

    Hi,

    thanks Karl for the plugin, it is very usefull and easy to configure.

    But (there is always a but :) ) I have a problem of smart positioning with image maps: the tips always appear on the right side of the area (where you click), even if the dot is next to the right border of the window.

    See there: http://www.lefourneau.com/lerelecqkerhuon/historique.htm
    Click on the small map to show the bigger map with the dots and then, reduce the size of your window.

    Thanks for help

Sorry, but comments for this entry are now closed.