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.


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


Any clue how I can solve this?

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.

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

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.