Edit in JSFiddle

(function($) {

  $.fn.tooltip = function() {

    /**
     * Core
     */
    var $tooltip = $('<div class="md-tooltip"></div>').appendTo('body');

    return this.each(function() {
      var self = $(this);

      self.on({
        mouseenter:function(e) {
          setPosition(e.pageX, e.pageY);
          $tooltip.html(self.data('tooltip'));
          showTooltip();
        },
        mouseleave:function() {
          hideTooltip();
        },
        mousemove:function(e) {
          setPosition(e.pageX, e.pageY);
        }
      });
    });

    /**
     * Method
     */
    function showTooltip() {
      $tooltip.stop()
        .fadeIn();
    }
    function hideTooltip() {
      $tooltip.stop()
        .fadeOut();
    }
    function setPosition(x, y) {
      $tooltip.css({
        top: y + 15,
        left: x + 5
      });
    }
  };
}(jQuery));

$(function() {
  $('[data-tooltip]').tooltip();
});
<ul>
<li data-tooltip="Dは泥酔、Nはナイト(夜)の意味で、「泥酔ナイト」">DN</li>
<li data-tooltip="神がかって素晴らしい">カミッテル</li>
<li data-tooltip="別件があるという意味の<br>オヤジギャグ">ベッケンバウアー</li>
<li data-tooltip="「パターン」のガーリー系の活用事例">パティーン</li>
<li data-tooltip="「ありがとう」の活用例">ありとーすちゃすてすチャース</li>
<li data-tooltip="ハスハス(興奮状態)">HASHAS</li>
<li data-tooltip="イケメン">池様</li>
</ul>
/* for plugin */
.md-tooltip {
  display: none;
  position: absolute;
  padding: 7px 10px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  background: rgba(0, 0, 0, .7);
  *background: #333;
  color: #fff;
  font-size: 12px;
}
.md-tooltip:after {
  content: "";
  position:absolute;
  width: 0;
  height: 0;
  left: 15px;
  top: -20px;
  margin: 0 0 0 -5px;
  border-top: 10px solid transparent;
  border-right: 5px solid  transparent;
  border-left: 5px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, .7);
}

/* for demo */
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin: 0 10px 10px 0;
  padding: 10px 20px;
  background: #eee;
}