jQueryツールチッププラグイン、tipsyをつかう #JavaScript

Web サービス作ってると、ボタンや画像、アイコンなどにツールチップが欲しくなります。
最近では Twitter の公式アプリで、リプライやリツイートのボタンで表示されるアレです。

こういうのやるなら jQuery プラグインにあるだろって探したらやっぱりありました。
tipsy - Facebook-style tooltip plugin for jQuery

なぜか jQuery 公式では探せなかったので、ダウンロードは GitHub から。
https://github.com/jaz303/tipsy

Rails の場合は、vendor にファイルを放り込むか Gem を使うことになります。
私は CSS のみ erb にして手動で放り込みました。

tipsy.css.erb

  .tipsy-arrow { position: absolute; background: url('<%= asset_path 'tipsy.gif' %>') no-repeat top left; width: 9px; height: 5px; }

余談ですが、vendor/images を tipsy のために新規に作成したんですが、アプリケーションサーバを再起動しないと反映されないらしく、ツールチップの吹き出し部分の gif 画像（↑で asset_path にしている奴）が表示されなくて、何でだろうとしばらく悩みました。

使い方は非常に簡単。
すでに Qiita に記事もあるので、こちらをご覧いただくと早いです。
jQuery tooltipプラグイン tipsy

でも、せっかく使うならもう少し簡単にできるといいなということで、以下のようなコードを組みました。

tooltip.js

var tipsy_tooltip = function(id){
    $(id).each(function(){
        var that = $(this);
        var title = that.attr('title');
        var html = $('#' + that.attr('data-target-id')).html();
        var gravity = that.attr('data-gravity')? that.attr('data-gravity') : 'n';
        var fade = that.attr('data-fade') ? true : false;
        var delayIn = that.attr('data-delayIn') ? parseInt(that.attr('data-delayIn'), 10) : 0;
        var delayOut = that.attr('data-delayOut') ? parseInt(that.attr('data-delayOut'), 10) : 0;
        var trigger = that.attr('data-trigger') ? that.attr('data-deLayOut') : 'hover';
        var offset = that.attr('data-offset') ? parseInt(that.attr('data-offset'), 10) : 0;
        var opacity = that.attr('data-opacity') ? that.attr('data-opacity') : 0.8;

        that.tipsy({
            gravity: gravity,
            html: true,
            fade: fade,
            delayIn: delayOut,
            delayOut: delayOut,
            trigger: trigger,
            offset: offset,
            opacity: opacity,
            fallback: html
        });
    });
};

$(document).ready(function(){
    tipsy_tooltip('.tipsy_tooltip');
});

こんな風に使います。

tooltip.html.erb

<div class="fellows_list tipsy_tooltip" data-target-id="fellow_tip_<%= user.id %>" data-fade="true" data-offset="5" data-opacity="0.6" data-gravity="n" data-delayOut="500" data-delayOut="1000" >
  <%= image_tag user.avator_image_url %>
</div>
<div id="user_tip_<%= user.id %>" class="tooltip_text">
  <%= user.name %>
</div>

顔アイコン並べてるところでツールチップでユーザ名的な使い方を考えていたので、正直ユーザ一人一人で js が記載されているのはそこはかとない気持ち悪さを感じていました。
これでぐっといい感じになったと思います。

別に Rails 前提でも何でもないコードなので、とりあえず動く HTML な例としてはこんな感じ。

tooltip.html

<div class="tipsy_tooltip" style="width:200px" data-target-id="user_tip_jobhub" data-fade="true" data-offset="5" data-opacity="0.6" data-gravity="n" data-delayOut="500" data-delayOut="1000" >
  <img src="http://d1lb2p0wspohx0.cloudfront.net/assets/top_logo-7d3c71b97229f14e9f8e993bb6b72db3.png">
</div>
<div id="user_tip_jobhub" class="tooltip_text" style="dispay:hidden;">
  じょぶはぶー
</div>

こんな風になりますよん。