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>

Answer 2

You can use the following method to do it.

JQuery:

//Change it to your tooltip object- ID/Name/Class
$("#tooltip").mouseout(function(){
  $(this).delay(500).queue(function() {
    $(this).css('display', 'none');
  });
//We use this method because, user can come over the element before its disapper.
}).mouseover(function() {
   if($(this).is(':visible'))
     $(this).css('display', '');
});

Answer 3

I use this lib with some customizations. You can replace line 77

$tooltipC.html($tooltip.data("title"));

of this file with the following line:

$tooltipC.html(options.content);

And than you can use it as follows:

$('.tooltip-target').each(function () {
        $(this).tooltip({
            cssClass: "tooltip",
            content: $($(this).attr("rel")).html()
        });
    });

As you can see in my project for every tooltip target I set attribute rel with the selector of control with html for tootlip. As follows:

<img src="help.ico" class="tooltip-target" rel="#helpTooltip" />
<div style="display:none" id="helpTooltip">
    Some html content for tooltip
    <a href="help.html">Details..</a>
</div>

Answer 4

The question was if it is possible to "Combine jquery cluetip and hoverintent?". The simple anwser is: yes.

Simply download and include the HoverIntent script on your page. The script (+ examples) can be found at: http://cherne.net/brian/resources/jquery.hoverIntent.html

When you've included HoverIntent, you can set some additional options for your 'ClueTip':

$basketTooltips.cluetip({
    attribute:        'rel',

        // other options        

    // HoverIntent specific options
    hoverIntent: {
        sensitivity:  3,
        interval:     100,
        timeout:     500
    },

});

The cluetip HoverIntent options are equal to the original HoverIntent options, found at: http://cherne.net/brian/resources/jquery.hoverIntent.html