Simple js tooltip

by polaszk

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
  <span class="warning fa fa-exclamation-triangle" title="Info"></span>
  <span class="warning fa fa-exclamation-triangle" data-info="Info"></span>
  <span class="warning fa fa-exclamation-triangle" data-info="Info 2"></span>
  <span id="tooltip" class="tooltip"></span>
</div>

CSS

.container {
  position: relative;
}

.tooltip {
  background-color: rgba(39, 39, 39, 0.8);
  color: #fff;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid #1c1c1c;
  display: none;
  position: absolute;
}

JavaScript

$(".warning").on('mouseenter', function(e) {
  var message = $(this).data('info');
  var tooltip = $('#tooltip');
  var left = e.pageX + "px";
  var top = e.pageY + "px";

  if (message) {
    tooltip.text(message);
    tooltip.css({
      'left': left,
      'top': top
    });
    tooltip.show();
  }
});

$(".warning").on('mouseleave', function() {
  var tooltip = $('#tooltip');

  tooltip.text('');
  tooltip.hide();
});