custom tooltip (adapted from evan)

gistfile1.txt

<script>
  $('.tooltip').children('.tooltip-tooltip').append('<span class="tooltip-pointer"></span>');
  $('.tooltip').hoverIntent(function() {
    var body = $(this).children('.tooltip-tooltip');
    bodyHeight = -(body.height() - 20);
    bodyWidth = -(body.width() / 2);
    body.css('top', bodyHeight);
    body.css('left', bodyWidth);
    body.show();
  }, function() {
    $(this).children('.tooltip-tooltip').hide();
  });
</script>
<style>
    .tooltip {
      position: relative;
      display: inline-block;
    }
    .tooltip-trigger {
      text-align: center;
      font-style: italic;
      font-size: 13px;
      line-height: 13px;
      font-weight: bold;
      background: $bright-blue;
      color: $white;

      display: inline-block;
      min-width:16px;
      min-height:16px;
      border-radius:20px;
      padding:2px 3px 1px 1px;
      margin:0 0 0 5px;
    }
    .tooltip-tooltip {
      display: none;
      position: absolute;
      z-index: 1000;
      text-align: center;
      .tooltip-tooltip-contents {
        display: inline-block;
        text-align: left;
        background: $light-blue;
        padding:10px;
        border-radius: 10px;
        min-width: 200px;
        &, a {
          color: $white;
        }
      }
      .tooltip-pointer {
        width: 0; 
        height: 0; 
        margin:0 auto 10px;
        display: inline-block;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid $light-blue;        
      }
    }
</style>

<span class="tooltip">
  <span class="tooltip-trigger">i</span>
  <span class="tooltip-tooltip">
    <span class="tooltip-tooltip-contents">
      content
    </span>
  </span>
</span>