jQuery 도구를 사용하여 플러그인 tipsy 알림

웹 서비스를 만들려면 버튼, 이미지, 아이콘 등 도구 설명이 필요합니다.
최근 트위터 공식 앱에서 답장과 전송 버튼으로 뜨는 거.

이렇게 하려면 jQuery 플러그인에서 찾으면 역시 있습니다.
tipsy - Facebook-style tooltip plugin for jQuery
왜 jQuery 공식에서 찾을 수 없는지 모르겠지만 다운로드는 GitHub에서 시작했습니다.
https://github.com/jaz303/tipsy
Rails의 경우 vendor에 파일을 넣거나 Gem을 사용합니다.
나는 CSS를 eb로만 수동으로 던졌다.
tipsy.css.erb

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

한마디로 tipsy를 위해vendor/images를 새로 만들었지만 응용 서버를 다시 시작하지 않으면 반영되지 않을 것 같아서 도구가 제시한 부분의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>

이렇게 될 거야.