jQuery DropDown from li w tooltip

by amindunited

HTML

<div class="exampleContainer">
    <div class="dd_ul">
        <ul>
            <li>Object One</li>
            <li>Object Two</li>
            <li>Object Three</li>
            <li>Object Four</li>
            <li>Object Five</li>
            <li>Object Six</li>
            <li>Object Seven</li>
        </ul>
    </div>
</div>

<div class="popup"></div>

JavaScript

$('.dd_ul ul li').on('mouseover', function(e){
    var event = e;
    $(e.target).addClass('hovered');
    var myTimer = window.setTimeout(function(){
        if ( $(e.target).is('hovered') ) {
            $('.popup').html('');
            $('.popup').appendTo('body');
            $('.popup').html("This is a popup for "+ $(e.target).html() +"!");
        }
    }, 200)
});

$('.dd_ul ul li').on('mouseout', function(e) {
    $(e.target).addClass('hovered');
    $('.popup').html('');
});

$('.dd_ul ul li').on('click', function(e){
    console.log("you clicked on ", e.target)
})