jQueryのトリガ要素に関連してツールチップを配置するにはどうすればよいですか？

JSONレスポンス（ajax呼び出しから）をツールチップに表示したいと思います。私は、左にその下のアンカーであるトリガ要素に関連してツールチップを配置したいと思います。同じページに多くのトリガ要素があります。私はこのようなものを使用するのではと思った：jQueryのトリガ要素に関連してツールチップを配置するにはどうすればよいですか？

$.ajax({ 
    // Do stuff 
    success: function(response) { 
     $(this).after("<div class='tooltip'>" + response.message + "</div>"); 
    } 
});

このコードは私の問題を解決していません。ターゲット要素のコンテナにツールヒントを挿入します。私は、浮動小数点数をターゲット要素から独立させるためのツールチップが必要です。ポストに投票すると、StackOverFlowのツールチップのように表示されます。

jQueryでこれを行う方法はありますか？

出典

2011-07-10 Mohamad

他の要素のツールチップを独立させるために、それはあなたの<body>と高z-index CSSプロパティとの直接の子でなければなりません。

DOMにツールチップをドロップしようとすると、ページレイアウトを妨げる恐れがあります。

次に、トリガー要素の座標に基づいて、absoluteの位置を使用してください。

.tooltip { 
    z-index: 10000; 
    position: absolute; 
} 

var offset = $(trigger).offset(); 
offset.top += $(trigger).height(); 
$(tooltip).offset(offset);

出典

2011-07-10 20:50:05 Alnitak

絶対に配置されていれば（親が相対的に配置されていない限り）、ドキュメントフローから完全に取り除かれている限り、必ずしも「ボディ」の直接の子である必要はありません。 –

@jack trueですが、役立ちます。私は通常、すべてのスタイルシートでデフォルトとして 'div {position：relative}'を持っています。 – Alnitak

@Alnitak、ありがとうございます。しかし、どのように私はツールチップのdivを注入するのですか？私はまだafter（）を使いますか？ – Mohamad

jquery ui position()を使用すると、特定の要素に対して比較的応答のあるツールチップを配置できます。

出典

2011-07-10 20:34:45 Litek

jQueryのトリガ要素に関連してツールチップを配置するにはどうすればよいですか？

答えて

関連する問題