Question

Within an ASPX page, I would like to have the popup shown within the closes xy coordinate of where mousehover is done (similar to windows status bar where when we mousehover outlook it shows something next to it. )

So in my ASPX page currently I have the jquery that shows the dialog in the center of the page (it masks the ASPX page into whole white and then displays the the actual content as a popup window) but I would like to show the popup closer to the mousehover without masking the aspx page.

The ASPX page has few jquery references.
Below is the ASPX page.

<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>

Please suggest.

thanks.

Answer 1

Quote OP:

…I would like to have the popup shown within the closes xy coordinate
of where mousehover is done…

…The ASPX page has few jquery references…

…Please suggest.

jQuery plugin, qTip2, will give you the option of having the popup tooltip or modal box follow the mouse pointer, if that’s what you’re asking. See mouse tracking demo below.

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

jsFiddle Demo with Code

Download and include the qTip2 JavaScript & CSS files.

<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'
    });
});