jquery cluetip breaks when loaded more than once

Question

I am using the jQuery cluetip plugin in a portal environment where there can be more than one instance of a portlet on a portal page. Each portlet is its own app, so it really knows nothing about the other portlets. Each portlet needs to use the cluetip plugin, so it is loading it when it needs it. The problem is that, when the cluetip script is loaded more than once, it generates the following error:

$cluetip is undefined

I know one possible solution is to check whether the plugin is already loaded or not, but every check I have tried fails. I have tried:

if(jQuery.cluetip), if(jQuery().cluetip), if(jQuery.fn.cluetip), if(jQuery().fn.cluetip)

and none of them work. They all return undefined.

How can I check whether the plugin is already loaded or not? Or, is there another solution that I can implement?

Answer 1

Are you utilizing cluetip inside a document ready function?

$(function() {
  $('a.tips').cluetip();
});

It doesn't look like you're using cluetip properly based on the code you posted above. You don't really need to check if the plug-in is loaded. If you have the script in your header:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>

then you just need to select what you want to have a tip on ('a.tips') in my example above, and it should just work.

If you post your Javascript and HTML, I can provide you a better answer.

Answer 2

Looking at the source from the cuetip site:

<script type="text/javascript">
$(document).ready(function() {
  $('a.tips').cluetip();

  $('#houdini').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

Things to notice is that the first thing loaded is jQuery.js, followed by cuetip.

Make sure that your html looks the same, and make sure that the cuetip AND jQuery are loading fine.