Qtip works but not always [stuck tooltip and sometimes not showing]

[bittyme]

Hi there, just installed qtip on a site and using it on an image area map. qTip works, but if i do multiple hovers over the areas it stops after showing twice. eg.
Go to area 1 [shows qtip]
Go to area 2 [shows qtip]
Go to area 3 [shows qtip]
Go to area 1 [shows qtip]
Go to area 2 [shows qtip]
Go to area 3 [shows qtip]
Go to area 2 [DOESNT show qtip]

and sometimes when hovering over and then moving away the qtip just sticks and never fades and another one is unable to show up (see image)

JAVASCRIPT Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/drag/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.debug-1.0.0-rc3.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
 
// Create the tooltips only when document ready
$(document).ready(function(){
$('.ttcont1').qtip({
   tip: true,
   style: {
      width: 90,
      height: 23,
      background: '#c1c1c1',
      color: 'black',
      textAlign: 'center',
      border: 0,
      fontSize: '0.6em',
      fontFamily: 'Verdana',
      fontWeight: 'bold',  // Inherit from preset style
      cursor: 'pointer',
      hide: { fixed: true, delay: 500 }
   }
});
$('.ttcont2').qtip({
   tip: true,
   style: {
      width: 89,
      height: 21,
      background: 'yellow',
      color: 'black',
      textAlign: 'center',
      border: 0,
      fontSize: '0.6em',
      fontFamily: 'Verdana',
      fontWeight: 'bold',  // Inherit from preset style
      cursor: 'pointer',
      hide: { fixed: true, delay: 500 }
   }
});
$('.ttcont3').qtip({
   tip: true,
   style: {
      width: 89,
      height: 21,
      background: 'green',
      color: 'black',
      textAlign: 'center',
      border: 0,
      fontSize: '0.6em',
      fontFamily: 'Verdana',
      fontWeight: 'bold',  // Inherit from preset style
      cursor: 'pointer',
      hide: { fixed: true, delay: 500 }
   };
})
});

HTML Code

<area shape="rect" coords="207,286,239,316" class="ttcont2" title="Daily Gopher"/>
 
<area shape="rect" coords="56,377,94,407" href="archive/" class="ttcont2" title="Archive"/>
 
<area shape="rect" coords="344,210,366,231" class="ttcont2" title="Community"/>
 
<area shape="poly" coords="352,88,352,66,360,59,368,65,369,79" class="ttcont2" title="Login"/>
 
<area shape="rect" coords="623,124,660,164" class="ttcont2" title="Macbeth"/>
 
<area shape="rect" coords="438,175,454,187" class="ttcont1" title="About Us"/>
 
<area shape="rect" coords="41,264,69,295" class="ttcont2" title="Closed"/>

any ideas are appreciated
many thanks

[bittyme]

bump... still need help with this please if pos

[Craig]

You could try setting show.solo to true, but this sounds like a 1.0 problem, so checkout qTip2 to solve this fully! Suggested you upgrade anywho since 1.0 is pretty much a dead project!

[bittyme]

thanks for the reply craig, mmmm yeah ok i will
how easy is it to upgrade to 2.0?

[Craig]

Pretty easy. There's a code converter for your old 1.0 code, so just run it through that and include the new library + it's CSS file, and you're done. http://craigsworks.com/projects/qtip2/converter/

[bittyme]

i took a look at qtip2 and it looks ok, but i still have the same problem with the tooltips sticking even when mouse cursor isnt on them, as a result i got 3 sticking at the same time which dont fade away. (see new img)

also how to edit styles in qtip2 like i have done above in qtip1.0 to have 4 different styles