0

I want to use the hover feature of cluetip jquery plugin. I am calling an ajax request on hover but i want it to only do the ajax call if i am highlighting the link for a certain period of time before the loading image popups . This will avoid calling to the server when a person hovers over a link by accident for a short second.

Is this possible? I see that i can include hoverintent plugin so i added the options below but it doesn't seem to do anything. as per below, i tried using very large numbers but it still kicks off the ajax loading image immediately after i hover over a link.

 <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.hoverintent.js") %>"></script>
 <link rel="Stylesheet" type="text/css" href="<%= Url.Content("~/Content/jquery.cluetip.css") %>" />
 <script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.cluetip.js") %>"></script>


  $('a.descriptionLink').cluetip({
    width: '450px',
    //cluetipClass: 'jtip',
    showTitle: false,
    cluetipClass: 'jtip',
    hoverIntent: {
        sensitivity: 413,
        interval: 4650,
        timeout: 0
    },
    sticky: true,
    mouseOutClose: true,
    ajaxSettings: {
        dataType: 'json'
    },
    ajaxProcess: function (data) {
        var display = data.status;
        display += "<br><br><b>Description:</b> " + data.description;
        return display;
leora
  • 188,729
  • 360
  • 878
  • 1,366

1 Answers1

3

clueTip has an option for the hoverIntent plugin which does exactly what you want.

Tomm
  • 2,142
  • 1
  • 15
  • 19
  • i updated the questions with some additional code, adding hoverintent options doesn't seem to do anything. . i must be doing something wrong – leora Nov 01 '11 at 01:31
  • First of all... are you loading the `hoverIntent` plugin? It's not bundled with clueTip. – Tomm Nov 01 '11 at 01:49
  • yes, i have included the hoverintent plugin, i have updated the question – leora Nov 01 '11 at 01:51
  • Next I would recommend the following hoverIntent settings: `sensitivity: 7, interval: 100, timeout: 500`. The `timeout` settings is the crucial parameter. Here you determine how long (in milliseconds) the user has to hover over the element before the clueTip is displayed. So if you set timeout to 0 clueTip will always fire. – Tomm Nov 01 '11 at 01:51