Geek Answers Handbook

Combining jquery cluetip and hoverintent?

I use jquery cluetip to show, huh, tooltips :-) I made them sticky because I want the user to be able to move the mouse to the displayed tooltip - if they so wish. However, if the user does not move the mouse into a tooltip, I want the tooltip to disappear after a while. It seems to me that this should be possible with the hoverintent plugin. But this plugin does not work if the user does not move the mouse over the plugin once. If this happens, cluetip will remove the tooltip by itself ...

How can I get a tooltip for display, wait for 500 ms, and if the user does not move the tooltip cursor, then it disappears?

I was thinking of starting a timer with onShow, adding a script to the tooltip that onmouseover disables the timer and the like, but that seems too complicated ...

Has anyone got a better idea? :-)

Thank,

Floor

+5
source share
4 answers

I don’t know the hint plugin that supports this, so you may have to create something yourself. The following example works, although making it universal, reusable, and using the tooltip plug-in 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>
+1
source

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

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

this file with the following line:

$tooltipC.html(options.content);

:

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

tooltip, rel html tootlip. :

<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>
0

.

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', '');
});
0

, " jquery cluetip hoverintent?". anwser: .

HoverIntent script . script (+ ) : http://cherne.net/brian/resources/jquery.hoverIntent.html

HoverIntent, "ClueTip":

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

        // other options        

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

});

clouetip HoverIntent HoverIntent, : http://cherne.net/brian/resources/jquery.hoverIntent.html

0

More articles:


All Articles