ホバー情報ボックスの実装

Question

私はカレンダーを持ち、ユーザーがセルを移動すると、その日付の詳細が表示された大きな情報ボックスが表示されます。ユーザーが離れたときに情報ボックスを消してしまいましたが、何か問題があります。

私は基本的に、マウスカーソルが情報ボックスに隠されているカレンダーセルから移動すると消えるようにします。しかし、私はこれに問題がありますmouseenterとmouseleaveはトップの要素としてインフォボックスを持つことによって台無しになるので。

だから私は透明で、その下にあるカレンダーセルと同じ形と位置を持ち、情報ボックスの上にあるように、Zインデックスが1000である「プレースホルダ」divを使ってこの問題を回避しようとしました。代わりにmouseenterとmouseleaveイベントをこれらのdivに適用します。

これには2つの問題があります。 1つは、私は今、意味的に私のHTMLを混乱させました。 divには目的がありませんが、制限のように見えるものを回避することです。第2に、jQueryのUI選択が乱れてしまいます（これをカレンダーセルに適用しました - クリックはもはやセルを選択しません）。

情報ボックスを表示するためのきれいな方法はありますか？情報ボックスとのユーザーのやり取りはありません。情報を表示するだけです。

EDIT：

<li> 
    <div class="day-content"> 
    </div> 
    <div class="day-content-placeholder"> 
    </div> 
</li> 

とCSS

li 
    { position: absolute; width: 15%; height: 20%; top: ... left: ... } 
.day-content 
    { position: absolute; width: 100%; height: 100%; } 
.day-content-placeholder 
    { position: absolute; width: 100%; height: 100%; z-index: 1000; } 
.popup 
    { position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; } 

とJavascript

var popup; 
$('.week-content-placeholder') 
    .mouseenter(function() 
     { 
     popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this); 
     }) 
    .mouseleave(function() 
     { 
     popup.remove(); 
     }); 

正確なコードではありませんが、あなたのアイデアを得る：ここではいくつかのコードがあります。これは問題ありませんが、私が言ったように、.week-content-placeholderは.week-contentを超えているため、jQuery UIの選択機能は.week-contentでは正しく機能しません。

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

Answer 1

あなたは次のように透明「プレースホルダ」のdivを使用してソリューションを変更することができます：

は{zIndex: -1}を使用して、「カレンダーセル」の下に「プレースホルダ」ダイビングを持っています。

カレンダーセルを入力するときは、大きい「コンテンツ」divを外し、「placeholder」divに{zIndex: 1000}を設定して上部に移動します。

"content" divを隠すプレースホルダdivに "mouseout"イベントを設定し、 "プレースホルダ"セルに{zIndex: -1}を設定します。

HTMLで「プレースホルダ」セルを作成するのではなく、JavaScriptで作成し、各「カレンダー」セルの「mouseIn」の位置に移動することができます。また、「カレンダーセル」上の「クリック」イベントもこのイベントに複製することができます。

これが動作するかどうかを教えてください。

<div id='box'> 
    Normal content 
    <div id='inner'> 
     This big box obscures everything in the cell! 
    </div> 
</div> 

ホバーが発生するまで、内箱が隠されている。ここで

Answer 2

は、ここでは、jQueryを使ってこれをやらせる15種類のプラグインです.pageXとevent.pageYを比較します。

Answer 3

あなたはmousemouse追跡し、イベントに対するあなたのホバートリガーのoffsetLeft +幅とoffsetTop +高さを使用することができます。

Answer 4

説明したようにこの作業を行うと、カレンダーセル内に残っているわずかなマウスの動き（目に見えない）がポップアップを残しますが、セルを出る動きが少し大きくなるとポップアップが消えます。

ユーザはポップアップ自体内の動きのみを表示します—ポップアップ内の動きが小さいため、その位置に残ります。大きな動きはそれを遠ざける。

ポップアップdiv自体を終了する際にポップアップが消えるのを誘発することをお勧めします。 「先端」パネル内に残っている動きは、それを去ります。私は、（1）これはユーザビリティが優れていること、（2）不明瞭なカレンダーセルイベント処理の問題を回避できることだと思います。

divを作成するときに、.mouseleave()ハンドラをdivに追加すると、これを行うことができます。

Answer 5

トリックは、情報がセルの子をボックスにすることです。 CSSを使用すると、ボックス自体を負のマージンでセルより大きくすることができます。

#box 
{ 
    width:100px; 
    height:100px; 
    margin:100px; 
    border:solid 2px darkblue; 
    position:relative; 
} 
#box #inner 
{ 
    display:none; 
    position:absolute; 
    background-color:#eeee00; 
    top:-10px; 
    left:-10px; 
    width:120px; 
    height:120px; 
} 

そしてホバーボックスをボックスカバーし、それは子供だから、あなたは、通常のjqueryのホバーを使用することができます：それは実行している。ここ

$('#box').hover(function(){ 
    $('#inner').show(); 
},function(){ 
    $('#inner').hide(); 
}); 

：あなたが情報を作成することができます

http://jsfiddle.net/RbqCT/

あなたのコードと同じように動的にボックスを作成します。