Combining jquery cluetip and hoverintent?

Question

I'm using jquery's cluetip to show, huh, tooltips :-) I made them sticky, because I want the user to be able to move the mouse to the shown tooltip - if they wish. However, if the user does not move the mouse to the tooltip, I want the tooltip to disappear after some time. It seems to me, that this should be possible using the hoverintent-plugin. But this plugin does not fire unless the user moves the mouse over the plugin once. If that happens, cluetip removes the tooltip by itself...

How can I get a tooltip to display, wait for 500 msec, and if the user does not mouseover the tooltip, than disappear?

I've been thinking about fireing a timer with onShow, adding a script to the tooltip that onmouseover disables the timer and stuff like that, but that seems overly complicated...

Anybody got a better idea? :-)

Thanks,

Paul

Answer 1

I don't know a tooltip plugin that supports that, so you may have to create something yourself. The following example works, although making it generic, reusable and use a tooltip plugin will require more work.

<a href="#" onclick="activateTip()">click here</a>
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white;
   display: none; position: absolute">
   fake tooltip
</div>
<script type="text/javascript">

    function activateTip() {
       $("#tooltip").fadeIn(autoFade);
    }

    function autoFade() {
       var cancel = setTimeout(hideTip, 3000);
       $("#tooltip").mouseover(function () {
          clearTimeout(cancel);
          $("#tooltip").unbind("mouseover").mouseout(autoFade);
       });
    }

    function hideTip() {
       $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout");
    }

</script>