Отображение всплывающего окна jQuery на указателе мыши

Question

На странице ASPX я хотел бы, чтобы всплывающее окно отображалось в закрытой координате xy того места, где выполняется указатель мыши (аналогично строке состояния Windows, когда при наведении курсора мыши на него отображается что-то рядом с ним).

Так что в моей странице ASPX в настоящее время у меня есть jquery, который показывает диалог в центре страницы (он маскирует страницу ASPX в белый цвет, а затем отображает фактический контент в виде всплывающего окна), но я хотел бы показать всплывающее окно ближе наведите курсор мыши, не маскируя страницу aspx.

Страница ASPX имеет несколько ссылок на jquery. Ниже находится страница ASPX.

<asp:Content ContentPlaceHolderID="PageScript" runat="server">
    <div class="inline">
        <a href="#" tabindex="-1" class="question-quality"></a>
        <span>Quality:</span>
    </div>

<div id="dialog_product-quality" class="dialog-content" style="display: none;">
    <div class="dialog-content-padding">
        <p>
             <asp:Literal runat="server" ID="ProductQualityContentText" />
        </p>
    </div>
</div>

<link type="text/css" href="/store/javascript/css/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/javascript/jquery.ui.core.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.slider.js"></script>
<script type="text/javascript" src="/javascript/jquery151.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#dialog_product-quality').dialog(dialog_options);

$('a.Quality').hover(function(e){
   e.preventDefault();
   openDialogWindow('div#dialog_product-quality', 'Product Quality');
});
</script>
</asp:Content>

Пожалуйста, предложите.

Благодарю.

Answer 1

Цитата ОП:

... Я бы хотел, чтобы всплывающее окно отображалось в закрытой координате xy того места, где выполняется указатель мыши...

... На странице ASPX есть несколько ссылок на jquery...

... Пожалуйста, предложите.

Плагин jQuery, qTip2, даст вам возможность заставить всплывающую подсказку или модальное окно следовать за указателем мыши, если это то, что вы спрашиваете. Смотрите демонстрацию отслеживания мыши ниже.

http://craigsworks.com/projects/qtip2/demos/

jsFiddle Демо с кодом

Загрузите и включите файлы JavaScript и CSS qTip2.

<div id="demo-mouse" class="box">
    <h3>Hover over this box to see mouse tracking in action</h3>
</div>


$(document).ready(function()
{
    $('#demo-mouse').qtip({
        content: 'I position myself at the current mouse position',
        position: {
            my: 'top left',
            target: 'mouse',
            viewport: $(window), // Keep it on-screen at all times if possible
            adjust: {
                x: 10,  y: 10
            }
        },
        hide: {
            fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
        },
        style: 'ui-tooltip-shadow'
    });
});