Simple tooltip

tooltip.css

/* line 3, tooltip.css.sass */
.tooltip {
  margin-top: 5px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  padding: 7px 0 14px;
}
/* line 10, tooltip.css.sass */
.tooltip i {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -6px;
  width: 13px;
  height: 7px;
  background: url(/assets/public/spritesheet.png) -5px -336px no-repeat;
}
/* line 18, tooltip.css.sass */
.tooltip .inner {
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

tooltip.css.sass

@import "_base"

.tooltip
  $paddingTop: 7px
  $iconSize: 7px
  margin-top: 5px
  +opacity(0)
  position: absolute
  padding: $paddingTop 0 $paddingTop + $iconSize
  i
    position: absolute
    bottom: 0
    left: 50%
    margin-left: -6px
    width: 13px
    height: 7px
    +sheet(-5px, -336px)
  .inner
    padding: $paddingTop 10px
    background: rgba(0, 0, 0, 0.7)
    color: #FFF
    font-size: 12px
    +border-radius(6px)

tooltip.js

(function() {
  var Tooltip,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  Tooltip = (function() {

    Tooltip.el = null;

    Tooltip.tooltip = null;

    Tooltip.open = false;

    Tooltip.closeTimer = null;

    Tooltip.topMargin = null;

    function Tooltip(el) {
      this.findPos = __bind(this.findPos, this);
      this.hide = __bind(this.hide, this);
      this.show = __bind(this.show, this);
      this.createTooltip = __bind(this.createTooltip, this);
      this.mouseOut = __bind(this.mouseOut, this);
      this.tooltipMouseOver = __bind(this.tooltipMouseOver, this);
      this.mouseOver = __bind(this.mouseOver, this);
      this.bindEvents = __bind(this.bindEvents, this);      this.el = $(el);
      this.createTooltip();
      this.bindEvents();
    }

    Tooltip.prototype.bindEvents = function() {
      this.el.bind('mouseover', this.mouseOver);
      return this.el.bind('mouseout', this.mouseOut);
    };

    Tooltip.prototype.mouseOver = function() {
      if (this.open) {
        return clearTimeout(this.closeTimer);
      } else {
        return this.show();
      }
    };

    Tooltip.prototype.tooltipMouseOver = function() {
      return clearTimeout(this.closeTimer);
    };

    Tooltip.prototype.mouseOut = function() {
      return this.closeTimer = setTimeout(this.hide, 100);
    };

    Tooltip.prototype.createTooltip = function() {
      var el;
      el = $('<div></div>').attr('class', 'tooltip').append($('<i>')).append($("<span class='inner'>" + (this.el.data('tooltip')) + "</div>")).bind('mouseover', this.tooltipMouseOver).bind('mouseout', this.mouseOut);
      return this.tooltip = el;
    };

    Tooltip.prototype.show = function() {
      var pos;
      if (this.open) return;
      this.open = true;
      $('body').append(this.tooltip);
      this.topMargin = this.tooltip.css('margin-top');
      pos = this.findPos();
      this.tooltip.css('top', "" + pos.top + "px").css('left', "" + pos.left + "px");
      return this.tooltip.animate({
        opacity: 1,
        'margin-top': '0px'
      }, 200);
    };

    Tooltip.prototype.hide = function() {
      var _this = this;
      return this.tooltip.animate({
        opacity: 0,
        'margin-top': this.topMargin
      }, 200, function() {
        _this.tooltip.detach();
        return _this.open = false;
      });
    };

    Tooltip.prototype.findPos = function() {
      var pos;
      pos = this.el.offset();
      pos.left += this.el.width() / 2;
      pos.top -= this.tooltip.outerHeight();
      pos.left -= this.tooltip.outerWidth() / 2;
      return pos;
    };

    return Tooltip;

  })();

  jQuery.fn.extend({
    tooltip: function() {
      return this.each(function() {
        return new Tooltip(this);
      });
    }
  });

}).call(this);

tooltip.js.coffee

# Easy tooltips for elements.
#
# Examples
#   <span data-tooltip="The fuck was that?">The fuck is this?</span>
#
#   # Init tooltip
#   $ ->
#     $('[data-tooltip]').tooltip()
class Tooltip
  @el: null
  @tooltip: null
  @open: false
  @closeTimer: null
  @topMargin: null
  constructor: (el)->
    @el = $(el)
    @createTooltip()
    @bindEvents()

  bindEvents: =>
    @el.bind('mouseover', @mouseOver)
    @el.bind('mouseout', @mouseOut)

  mouseOver: =>
    if @open
      clearTimeout(@closeTimer)
    else
      @show()

  tooltipMouseOver: =>
    clearTimeout(@closeTimer)

  mouseOut: =>
    @closeTimer = setTimeout(@hide, 100)

  createTooltip: =>
    el = $('<div></div>')
      .attr('class', 'tooltip')
      .append($('<i>'))
      .append($("<span class='inner'>#{@el.data('tooltip')}</div>"))
      .bind('mouseover', @tooltipMouseOver)
      .bind('mouseout', @mouseOut)
    @tooltip = el

  show: =>
    return if @open
    @open = true
    $('body').append(@tooltip)
    @topMargin = @tooltip.css('margin-top')
    pos = @findPos()
    @tooltip.css('top', "#{pos.top}px")
            .css('left', "#{pos.left}px")
    @tooltip.animate({opacity: 1, 'margin-top': '0px'}, 200)

  hide: =>
    @tooltip.animate { opacity: 0, 'margin-top': @topMargin }, 200, =>
      @tooltip.detach()
      @open = false

  findPos: =>
    # Find position of middle of element
    pos = @el.offset()
    pos.left += @el.width() / 2

    # Adjust position based on size of tooltip
    pos.top -= @tooltip.outerHeight()
    pos.left -= @tooltip.outerWidth() / 2

    pos


# Create jQuery plugin
jQuery.fn.extend
  tooltip: ->
    @.each ()->
      new Tooltip(@)