2012-03-08 8 views
0

jQuery UIの位置を使用して基本的なツールチップを見直すのに役立つ必要があります。 jQueryのツールチップは、リンクからtitle属性を取得し、そのリンクのホバー上にツールチップを作成します。どのようにしてこのコードを改善したり、効率を上げることができますか?私は他人を助けることを期待してここに投稿したかったのです。私は確かに私は単純だろうと思った何かに十分な時間を過ごした。ここでjQueryを使用したjQuery(非プラグイン)ツールチップ - どのように改善できますか?

は私のコードは、(人々は別のバージョンを投稿するために大好きだ)である:

http://jsfiddle.net/pN4Bw/

$(".tip a").hover(
    function() { 
    var tipText = $(this).attr("title"); 
    $("<div class='toolTip' style='display:none;'>" + tipText + " </div>").insertAfter(this); 
$('.toolTip').position({ 
    my: "left top", 
    at: "right top", 
    of: this, 
    collision: "flip" 
}); 
//Is there a better way to select the tooltip? 
$(this).next().fadeIn(500); //should I fade it in this way?    
}, function() { 
//Should I use a better selector? 
$(this).next().fadeOut('slow', function() { 
    $(this).remove(); 
    }); 
});​ 
  • 私も、UIの位置や他のいくつかの技術を使用する必要がありますか?私はより良い解決策に開放されています。
  • より良い非プラグインjQueryのツールチップについて知っていますか?
  • 私はこれのようなもののためのプラグインの使用を拒否します。 http://jqueryui.com/demos/position/

アイデア、思考、コメント - 上記で使用

  • 私の心のStackOverflow
  • のjQuery UIの.position?ありがとう、私はこれも他の人に役立つことを願っています!

  • 答えて

    1

    jQueryUI position()メソッドの使用は、すでにページ内でjQueryUIを使用しているかどうかによって異なります。あなたが必要とするものがすべてポジションであれば、それをロードするのは無駄でしょう。

    offet()メソッドによるリンクオフセットとwidth()メソッドを使用した幅の指定を使用して位置を計算するための余計な努力はありません。

    すでにjQueryUI ...位置を()をロードする場合は、非常に便利なユーティリティメソッドで、自分自身

    EDITをCALCSをやって保存します。UIの位置「フリップ」オプションを使用すると、しかし、自分でコーディングするかなり多くの労力を必要としません

    +0

    ありがとう、charlietfl、良い点。代わりにオフセットを使用してその例を提供する時間があれば、それはすばらしいでしょう! – chainwork

    +0

    API http://api.jquery.com/category/offset/での例を確認する必要がある場合は、UI位置の「フリップ」部分に少し注意を払います。あなた自身がそれをするために窓dimenions等のより多くの呼び出しを必要とします – charlietfl

    +0

    あなたのコメントと洞察力に感謝charlietfl – chainwork

    関連する問題