Need to add a delay on mouse-out to this code

Question

This is some javascript for a drupal 6.x module called "Views Popup". https://drupal.org/project/views_popup

I can't seem to set a delay on the popup when the mouse moves off the link that triggers the popup. I have the title, teaser text and a more link in the popup and users need to be able to move the mouse off the link (image) in order to click on the "read more" link. I've tried adjusting all the settings in the code below, but none seem to relate to this. I'm not a coder, but I think something needs to be added to make this work. Any suggestions would be greatly appreciated.

Here's the code:

var popup_time = 0;
var popup_elem = 0;
var popup_show_timer = 0;
var popup_reset_timer = 0;

$(function() {
  popup_reset();

  $(".views-popup").appendTo("body");
});

Drupal.behaviors.viewsPopup = function(context) {
  $(".views-popup-row").mouseover(function() {
      popup_show(this);
    })
    .mouseout(function() {
      popup_hide(this);
    })
    .mousemove(function(e) {
      popup_move(this,e);
    });
}

function popup_move(me,evt){
  var e, top, left;

  if (Drupal.settings.views_popup.follow_mouse){
    left = evt.pageX + 15;
    top = evt.pageY;

    $("#views-popup-" + $(me).attr("id")).css({
      left: left + 'px',
      top: top + 'px'
    });
  }
}


function popup_show(me) {
  var p, e, top, left, pos ;

  var x = $(me).attr("id");

  e = $("#views-popup-" + $(me).attr("id"));
  if (e == popup_elem) {
    return ; // already handled
  }

  if (! Drupal.settings.views_popup.follow_mouse){
    pos  = $(me).offset();
    left = 20 + pos.left - $(document).scrollLeft();
    top  =  2 + pos.top + $(me).outerHeight() - $(document).scrollTop();
    $(e).css({
      left: left + 'px',
      top:  top  + 'px'
    });
  }

  popup_clear_show_timer();

  if (popup_elem) {
    popup_elem.hide();
    popup_time = 500 ;
  }
  popup_elem = e;
  if ( popup_time == 0 ) {
    popup_show_now();
  } else {
    popup_show_timer = setTimeout("popup_show_now();",popup_time);
  }
}


function popup_show_now() {
  popup_show_timer = 0 ;

  if(popup_elem) {
    popup_elem.show();
    clearTimeout(popup_reset_timer);
    popup_time = 0;
  }
}

function popup_clear_show_timer(){
  if (popup_show_timer) {
    clearTimeout(popup_show_timer);
    popup_show_timer = 0;
  }
}

function popup_hide(me) {
  e = $("#views-popup-" + $(me).attr("id"));

  popup_clear_show_timer();
  clearTimeout(popup_reset_timer);

  e.hide();
  if(e == popup_elem) {
    popup_elem = 2;
  }
  popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}

function popup_reset(){
  popup_time = Drupal.settings.views_popup.popup_delay;
}

Answer 1

So, assuming the above code works how you want -- and that you want to set a delay for the popup to hide, what you can do is call javascript's setTimeout(function, delay) function, which initiates a callback after delay milliseconds.

function popup_hide(me) {
  e = $("#views-popup-" + $(me).attr("id"));

  popup_clear_show_timer();
  clearTimeout(popup_reset_timer);

  var delay = 1000; // ms
  setTimeout(e.hide, delay); // <------- here

  if(e == popup_elem) {
    popup_elem = 2;
  }
  popup_reset_timer = setTimeout('popup_reset()',Drupal.settings.views_popup.reset_time);
}

This will call e.hide (the function) after 1 second has passed.