jQuery UI Tooltip with "Staying Power"

by James Greene

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="main">
    Blah blah blah
    <a class="btn-box-share" href="#" data-tooltip-content="TOOLTIP CONTENT!!1!">TIP</a>
    Blah Blah Blah
</div>

CSS

#main {
  background-color: pink;
  height: 100px;
}
.ui-tooltip {
  background-color: white;
  max-width: 200px;
}

JavaScript

$( document ).tooltip({
  show: null, // show immediately 
  items: ".btn-box-share",
  content: function() {
    return $(this).data("tooltip-content");  // or another dynamic source
  },
  hide: {
    effect: "", // fadeOut
  },
  //open: function( event, ui ) {
  //  ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  //},
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});