Home/ Questions/Q 6965995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T16:08:02+00:00

I’m using jQuery UI Dialog control to display a pop-up on hover of a

  • 0

I’m using jQuery UI Dialog control to display a pop-up on hover of a span. The popup constantly flickers as I move the mouse within the span. I understand jquery is firing mouseout & mouseover rapidly even though the pointer is still within the span. How do I fix it? Here’s the code –

 <li><span id="score">Score: <span class="user-heading-value">@Model.Score</span></span></li>

  $('#dialog-score').dialog({
    autoOpen: false,
    modal: true,
    width: 200,
    height: 150     
});

$("#score").mouseenter(function () {
    $('#dialog-score').dialog('open');
});
$("#score").mouseleave(function () {
    $('#dialog-score').dialog('close');
});

I’ve also tried –

$('#promptitude').hover(function () {
    $('#dialog-promptitude').dialog('open');
}, function () {
    $('#dialog-promptitude').dialog('close');
});

with no luck. Any help is greatly appreciated. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The modal overlay is triggering extra events. You probably don’t need the dialog to be modal; there are two ways that the user will be able to interact with something on the page while the dialog is up:

    1. They move their mouse somewhere else to click on something.
    2. They navigate to something else with the keyboard.

    (1) will trigger the mouseleave so it doesn’t matter.

    (2) may or may not be an issue depending on what’s on the page. If it is an issue then you could bind a keydown handler to the <body> that would close the dialog and unbind itself, something like this:

    function close_dialog() {
    $('#dialog-score').dialog('close');
    $('body').off('keydown', close_dialog);
    return true;
}

$('#score').hover(function () {
    $('body').on('keydown', close_dialog);
    $('#dialog-score').dialog('open');
}, function () {
    $('#dialog-score').dialog('close');
    $('body').off('keydown', close_dialog);
});

    Demo: http://jsfiddle.net/ambiguous/Wrgu2/

    • 0