JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
  <label for="age">Your age:</label>
  <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>
<a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>

CSS

.ui-tooltip-content {
  position: relative;
  padding: 1em;
}

.ui-tooltip-content::after {
  content: '';
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
}

.top .ui-tooltip-content::after {
  top: -10px;
  bottom: auto;
  border-color: #666 transparent;
  border-width: 0 10px 10px;
}

.bottom .ui-tooltip-content::after {
  bottom: -10px;
  border-color: #666 transparent;
  border-width: 10px 10px 0;
}

JavaScript

/*
var topPosition = {
  my: 'center bottom-20',
  at: 'center top'
};
var bottomPosition = {
  my: 'center top',
  at: 'center bottom+10'
};
*/
$(document).tooltip({
  //tooltipClass: 'top',
  position: {
    my: 'center bottom-20',
    at: 'center top',
    using: function(position, feedback) {
      console.log(feedback);
      $(this).css(position);
      $(this).addClass(feedback.vertical);
    }
  },
  open: function(e, ui) {
    var topOfToolTip = ui.tooltip.offset().top;
    var elem = $(e.originalEvent.target);
    if (elem.offset().top < topOfToolTip) {
      pos = {
        my: 'center top',
        at: 'center bottom+10'
      };
      ui.tooltip.position(pos);
      ui.tooltip.addClass("bottom");
    }
  }
});