Simple tooltip plugin.

01-file_tooltip.html

<span class="tooltip" data-tooltip="Tooltip data">Element</span>

02-file_tooltip.js

var tooltip = $('.tooltip');

tooltip.on({
    mouseenter: function(){
        // show
        if ($(this).data('tooltip').length){
            $('body').append('<span class="tooltip_vwr"/>');
            var tooltip_vwr = $('.tooltip_vwr');

            if ($(this).hasClass('tooltip')) {
                var offset_t = $(this).offset().top,
                    offset_l = $(this).offset().left,
                    tooltip_val = $(this).data('tooltip');

                // tooltip content ascription
                tooltip_vwr.html(tooltip_val);

                // tooltip body position
                var tooltip_vwr_h = tooltip_vwr.height();
                tooltip_vwr.css({
                    top: offset_t - (tooltip_vwr_h + 15),
                    left: offset_l
                });
                setTimeout(function(){
                    tooltip_vwr.addClass('visible');
                }, 50);
            }
        }
    },
    mouseleave: function() {
        // reset
        var tooltip_vwr = $('.tooltip_vwr');

        tooltip_vwr.removeClass('visible');
        setTimeout(function(){
            tooltip_vwr.remove();
        }, 5);
    }
});

03-file_tooltip_03.css

.tooltip_vwr {
  opacity: 0;
  z-index: 102;
  color: #102753;
  font-size: 11px;
  font-size: .92em;
  position: absolute;
  display: none;
  max-width: 200px;
  padding: 3px 5px 3px;
  text-shadow: 0 1px 0 #dfe9ff;
  border: 1px solid #5192C0;
  background-color: #abd6f4;
  font-family: Arial, Tahoma, Verdana, sans-serif;
  -webkit-box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf;
  -moz-box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf;
  box-shadow: inset 0 1px 0 #d2f1ff, inset 0 -1px 10px #6dcaff, 0 1px 2px #bfbfbf; 
}

  .tooltip_vwr.visible {
    opacity: 1;
    display: inline-block; 
  }
  
  .tooltip_vwr::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 10px;
    margin: 0;
    width: 5px;
    height: 5px;
    display: inline-block;
    border-top: 1px solid #5192C0;
    border-left: 1px solid #5192C0;
    background-color: #8CCEF3;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(225), M12=-sin(225), M21=sin(225), M22=cos(225));
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(225), M12=-sin(225), M21=sin(225), M22=cos(225))";
    zoom: 1; 
  }

04-file_tooltip.md

###Plugin Preview###

http://f.cl.ly/items/412F1d3v3O0B3c3p2m40/Zrzut%20ekranu%202013-12-02%20o%2016.58.39.png