use conveniently jQuery tooltip plugin tipsy ref: http://qiita.com/Oakbow/items/a1af86a4cf098aa75ecd

tipsy.css.erb

＃ change images file path for Rails applications.
  .tipsy-arrow { position: absolute; background: url('<%= asset_path 'tipsy.gif' %>') no-repeat top left; width: 9px; height: 5px; }

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>

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>

tooltip.js

// to use tipsy easily
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');
});