I've got a clueTip that brings in content using AJAX (the code is below). The onShow action creates another clueTip from a class within the first, "parent", cueTip. So I have a clueTip inside a clueTip. This works fine except that when I hover over the inner clueTip element the outer, "parent", clueTip is automatically closed and disappears. Is there any way to keep the outer or "parent" clueTip from closing in this applicaiton?
I'm new at this so maybe this is not what cueTips are intended for. Is there some other plugin I should be using? Any recommendations? Thanks, Bill ------------- main.html --------------- <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></ script> <script type="text/javascript" src="jquery.hoverIntent.js"></ script> <script type="text/javascript" src="jquery.cluetip.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.outer').cluetip({ dropShadow: false, showTitle: true, sticky: true, closePosition: 'title', arrows: true, onShow: function(){ $('.inner').cluetip({ dropShadow: false, showTitle: true, sticky: true, closePosition: 'title', arrows: true }); return true; }, ajaxCache: false }); }); </script> <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" /> </head> <body> <p><span class="outer" rel="outer.html" title="Outer clueTip">Hover for Outer clueTip</span></p> </body> </html> ------ outer.html -------- <html> <head> </head> <body> <p><span class="inner" rel="inner.html" title="Inner clueTip">Hover for Inner clueTip</span></p> </body> </html> ------ inner.html ------- <html> <head> </head> <body> <p>Inner clueTip contents</p> </body> </html>