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>
