0

We've implemented a series of hover cards that are triggered by a MouseEnter event. Despite adding timeouts to these, the hover card still shows even when just touching for a millisecond. More specifically is that if I was scrolling past the item and the mouse cursor hit it, the popup would still occur half a second later. I want to be able to scroll past an item without the popup happening by accident.

Here is the code:

        function onShowHoverCardHover(event) {

            $timeout.cancel(timeoutShow);
            $timeout.cancel(timeoutHide);

            timeoutShow = $timeout(function() {

                createHoverCard().then(function() {

                    $timeout(function() {
                        // alert('show timeout');
                        var _$hc = getHoverCard();
                        repositionHoverCard();
                        updateAlignments();

                        if (!isVisible) {
                            _$hc.addClass('show');
                            isVisible = true;
                        }
                    }.bind(this), 500);

                }.bind(this));

            }.bind(this), showTimeout);

        }
bnussey
  • 1,894
  • 1
  • 19
  • 34

1 Answers1

1

I believe that once timeout callback is triggered, you need to make a check to see if the mouse is still hovering over the card.

Use this to check if the element is being hovered using jQuery: Detect IF hovering over element with jQuery

$timeout(function() {
  // alert('show timeout');
  var _$hc = getHoverCard();
  repositionHoverCard();
  updateAlignments();

  // check that the card is not visible AND is being hovered
  if (!isVisible && _$hc.is(':hover')) {
    _$hc.addClass('show');
    isVisible = true;
  }
}.bind(this), 500);
Community
  • 1
  • 1
Philippe Schwyter
  • 273
  • 3
  • 10
  • Thanks mate! Is there anyway to do this without jQuery and all Angular? – bnussey Mar 03 '16 at 06:06
  • Maybe using `ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"` where hoverIn would set the timeout and hoverOut would cancel the timeout. Refer to: [ng-mouseover and leave to toggle item using mouse in angularjs](http://stackoverflow.com/questions/22532656/ng-mouseover-and-leave-to-toggle-item-using-mouse-in-angularjs) – Philippe Schwyter Mar 03 '16 at 06:13
  • Hey mate, I got it.. set it all up and working. Thanks for that! – bnussey Mar 03 '16 at 06:14