jQuery UI Tooltip example. Requires jQuery UI 1.9.2 which includes jQuery Core

link.html.erb

<% In your View. Note: :rel=>"nofollow" so that it's not crawled. %>
<%= link_to "Tooltip Link Text (Just Mouse Over)", "javascript:void(0);", 
      :id => "tooltip_id", :rel => "nofollow", :title => "This is the Tooltip Popup Text." %>

tooltip.css

/* Css for the tooltip */

.ui-tooltip, .arrow:after {
  background: #EB8F00;
  border: 2px solid white;
}

.ui-tooltip {
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  font: bold 14px "Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  tranform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

tooltips.apply.js

/* Apply the tooltip plugin */

$(document).ready(function () {
    var $id = $("#tooltip_id");
    if ($id.length > 0) {
        $id.tooltip();
    }
});

tooltips.plugin.js

/* Attaches a Tooltip */

$(function () {
    $(document).tooltip({
        track: true,
        position:{
            my:"center bottom-20",
            at:"center top",
            using:function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        }
    });
});