Mouse Move Tooltip

by Iqbal Kabir

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="tooltip-fm">
  <a href="#" title="abc big title hmmm...">This is a link This is a linkThis is a linkThis is a linkThis is a linkThis is a linkThis is a linkThis is a link</a>
</div>

CSS

.ui-tooltip {
  padding: 0;
  box-shadow: none;
  border: 0;
}

.ui-tooltip .tooltip {
  position: relative;
  left: 20px;
  top: 5px;
}

JavaScript

$(function() {
    $('a').tooltip({
      //tooltipClass: "tooltip in bottom",
      track: true,
      items: "[title]",
      content: function() {
        var element = $(this);
        if (element.is("[title]")) {
          var ttTitle = element.attr("title");
          return '<div class="tooltip in bottom-right"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ttTitle + '</div></div>';
        }
      },
      //position: { my: "left+15 center", at: "bottom center" }
    });
  });