<script>
$(document).ready(function () {
  var tooltip;

  $('[title]').on('mouseenter', function () {
  var title = $(this).attr('title');
  $(this).data('tooltip', title).removeAttr('title');

  tooltip = $('<div class="tooltip"></div>')
  .text(title)
  .appendTo('body');

  var offset = $(this).offset();
  var tooltipWidth = tooltip.outerWidth();
  var elementWidth = $(this).outerWidth();

  tooltip.css({
  top: offset.top - tooltip.outerHeight() - 8, // ზემოთ
  left: offset.left + (elementWidth / 2) - (tooltipWidth / 2) // ცენტრში
  });
  });

  $('[title]').on('mouseleave', function () {
  $(this).attr('title', $(this).data('tooltip'));
  tooltip.remove();
  });
});
</script>

<style>
.tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 200px;
  padding: 6px 10px;
  background: rgba(60,60,60,0.85);
  font: 12px/14px Calibri, Arial, sans-serif;
  color: #fff;
  border-radius: 5px;
  text-align: center;
}

/* ისარი ქვემოთ */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(60,60,60,0.85) transparent transparent transparent;
}
</style>