CODEWITHSUNDEEP
jqueryjquery-ui
fthmad9
fthmad9

Reputation: 51

jQuery UI & jQuery hover with title tooltip

I created tooltip with jquery ui and working. I append my menu in hover function. But If my mouse cursor on title tooltip, it is closing.

<script type="text/javascript">
    $(function(){
        $(".menu li div.altBurcT ul.altBurc li a").each(function(){
            $(this).tooltip({
                show: null,
                //track: true,
                position: {
                    my: "left top",
                    at: "left bottom"
                },
                open: function(event,ui){
                    ui.tooltip.animate({
                        top: ui.tooltip.position().top + 10
                    }, "slow");
                }
            });
        });

        $(".altBurcT").hide();
        $(".menu li.burc").hover(function(){
            $(this).find("> .altBurcT").stop(true,true).slideDown('slow'/*, 'easeOutBounce'*/);
        },function(){
            $(this).find("> .altBurcT").stop(true,true).hide();
        });
    });
</script>

How do we solve this?

Thank you for interest. Good works..

Appends:

Demo: jsfiddle.net/C7StJ

I added this is code, Now is not closed but if my mouse out, not close it :)

$(".menu li.burc").hover(function(){
    $(this).find("> .altBurcT").stop(true,true).slideDown('slow'/*, 'easeOutBounce'*/);
},function(){
    $(".altBurc li a").each(function(){
        if($(this).attr("aria-describedby").length < 1){
            $(this).find("> .altBurcT").stop(true,true).hide();
        }
    });
});

Upvotes: 0

Views: 573

Answers (1)

MLM
MLM

Reputation: 3688

On your mouseleave or callback after hover in your case. Check to see if .ui-tooltip exists and if it does, do not hide the menu.

$(".menu li.burc").on('mouseover', function() {
    $(this).find("> .altBurcT").stop(true,true).slideDown('slow'/*, 'easeOutBounce'*/);
}).on('mouseleave', function() {
    if(!($('.ui-tooltip').length > 0))
        $(this).find("> .altBurcT").stop(true,true).hide();
});

Demo: jsFiddle

Upvotes: 1

Related Questions