mousehoverでjQueryポップアップを表示

Question

ASPXページ内で、マウスオーバーが完了した場所のxy座標のクロップ内にポップアップを表示したいと思います（ウィンドウのステータスバーに類似しています。

現在私の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

見積OP：

...私は閉じ以内示すポップアップがmousehoverが行われる場合の XY座標がしたい...

... ASPXページjqueryの参照数が少ない...

...お勧めします。

jQueryプラグイン、qTip2は、あなたがそれはあなたが求めているものだ場合は、ポップアップツールヒントやモーダルボックスは、マウスポインタをたどることの選択肢を提供します。以下のマウストラッキングデモをご覧ください。

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

jsFiddle Demo with Code

DownloadとqTip2 JavaScriptの& CSSファイルが含まれています。

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