jQueryのUIを使用して動的要素のツールヒントの位置を設定する

Question

だから私は、次のコードを持っている：すべての要素がクラスのカスタムツールチップを持っているとの中心より上であるために

$(document).tooltip 
({ 
    tooltipClass: 'customToolTipTop', 
    position: {my: 'center bottom', at: 'center top-10'},   
    content: function() 
    { 
     var title = $(this).attr("title"); 

     if (title != null) 
     { 
      title = title.replace(new RegExp('\r?\n','g'), "<br />"); 
     } 
     return title; 
    }   
}); 

だから、これはツールチップを設定します要素。これは正常に動作します。 私はまた、要素を指す矢印を示すCSSを持っています。

私の問題は、私は位置とcssクラスを指定する必要があるということです。したがって、要素がページの上部近くにある場合は、ツールチップがその下に表示されますが、矢印は引き続きポイントします。

要素に関連してツールチップが表示される方法がわかりますか？

Answer 1

あなたは要素のoffset().topは、ツールチップのoffset().topよりも高いか低いかを確認するために（ツールチップは、測定するための準備ができて、その時点で）ツールチップのopenイベントでいくつかのコードを追加することができます。 （elemがツールヒントをトリガ何でもある）このような何か：

open: function(e,ui){ 
    var topOfToolTip = ui.tooltip.offset().top; 
    if (elem.offset().top < topOfToolTip) { 
     // Add a class or whatever 
     ui.tooltip.addClass("top"); 
    } 
} 

このfiddle where it's all put togetherを参照してください。私はフィドルの変数elemを作るために "不正行為"している可能性が高いです。ツールチップを引き起こした要素を取得するための標準的な方法がありますが、私は錆びます。