【jQuery】jQuery Tools ToolTip

MitライセンスのjQuery Toolsを使う機会があって、大いにハマったので、記録。

やりたかったことは、ajax処理で、引っ張ってきたhtmlに対しても、このjQuery tools tooltipを適応させたいというだけ。

。。。たったこれだけのことなんですが、ハマったｗ

というわけで、簡単に解決策だけ。。


【ベースとなるhtml】

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.scrollTo-1.4.2-min.js"></script>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      $('対象のセレクタ名').tooltip();
    });
   
       <style>
    /* tooltip styling. by default the element to be styled is .tooltip  */
    #tooltips {
        display:none;
        background:transparent url(/images/white_arrow.png);
        font-size:5px;
        height:70px;
        width:160px;
        padding:25px;
        color:#333;
        }
    </style>

↑これ、（当たり前ですが）、$(document).ready()使ってるんで、そのページの読み込み時のみ有効ですよね。
なんで、試しにajax通信成功時に読み込むページで上記のスクリプト部分全部突っ込んでも音沙汰なし。

したらば、と、

$().live('mouseover', function(){
　　$().tooltip();
});

としたり、$.getScriptで呼び出してもだめ。。。

（まぁこれまた至極当然、ちゃんと考えればわかるのに、思いつかなかったんだけども、）
解決策としては、
対象となるセレクタのajax成功時にこいつを動かすようにしてあげればokでした。。。
（.ajaxCompleteで呼び出してあげればよかった）

         $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function(data) {
　　　　　　$().ready(function(){
                        $.getScript("/js/jquery.tools.min.js");
                        $('対象としたいセレクタ名').ajaxComplete(function(){
                             $(this).tooltip();
　　　　　　　    });
                     });
                },
             });

なんて簡単なお話で、気づかなかったんだ。。。
これで数時間悩んだので、もし他にも同じようなことで悩んでいる人がいたり、未来の自分のためのメモということで。。。