Angularjs delay on hover

Create custom popups with a delay on mouseover using angularjs.

by tgienger

HTML

<div>
    
    <div ng-controller="MainCtrl">
        <span ng-mouseenter="showIt()" ng-mouseleave="hideIt()">Hover Me</span>
        <div class="outerDiv" ng-show="hovering">
            <p>Some content</p>
            <div class="innerDiv">
                <p>More Content</p>
            </div>
        </div>
    </div>
    
</div>

CSS

.container {
    width: 200px;
}
.outerDiv {
    width: 200px;
    height: 200px;
    text-align:center;
    background: yellow;
    position:relative;
}
.innerDiv {
    width: 100%;
    height: 100px;
    background: blue;
    color:white;
    text-align:center;
    position:absolute;
    bottom:0;
}

JavaScript

angular.module('myApp', [])
.controller('MainCtrl', function ($scope, $timeout) {
    // start with the div hidden
    $scope.hovering = false;
    
    // create the timer variable
    var timer;
    
    // mouseenter event
    $scope.showIt = function () {
        timer = $timeout(function () {
            $scope.hovering = true;
        }, 500);
    };
    
    // mouseleave event
    $scope.hideIt = function () {
        $timeout.cancel(timer);
        $scope.hovering = false;
    };
});