Tooltips using jQuery UI position

gistfile1.js

(function($) {
  $.fn.tooltip = function() {
    // Grabs its content from the next sibling .tooltip_content element, eg:
    // = link_to "Remove", "#", "data-tooltip" => ""
    // .tooltip_content
    //   %p This is my tooltip
    // Sets a class of right or left on tooltip based on what edge of the trigger it's using

    return this.each(function() {
      var $el = $(this),
          $tooltip = $el.next(".tooltip_content").clone();

      $tooltip.removeClass("tooltip_content").addClass("tooltip");

      $el.on("mouseenter", function() {
        $tooltip.appendTo(document.body).show().position({
          of: $el,
          my: "left top+6",
          at: "left bottom",
          collision: "flip",
          using: function(pos, dims) {
            $tooltip.addClass(dims.horizontal).css(pos);
          }
        });
      });

      $el.on("mouseleave", function() {
        $tooltip.hide().remove().removeClass("left right");
      });
    });
  };
})(jQuery);