JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<input class="question_box" title="hint">

CSS

/*
 * jQuery UI Tooltip @VERSION
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tooltip#theming
 */
.ui-tooltip {
    padding:8px;
    position:absolute;
        text-align:left;
    z-index:9999;
    -o-box-shadow: 0 0 5px #aaa;
    -moz-box-shadow: 0 0 5px #aaa;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
    background-image: none;
}
body .ui-tooltip { border-width:2px; }

JavaScript

/*
 * jQuery UI Tooltip @VERSION
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tooltip
 *
 * Depends:
 *  jquery.ui.core.js
 *  jquery.ui.widget.js
 *  jquery.ui.position.js
 */
(function($) {

var increments = 0;

$.widget("ui.tooltip", {
  options: {
    items: "[title]",
    content: function() {
      return $(this).attr("title");
    },
    position: {
      my: "left center",
      at: "right center",
      offset: "15 0"
    }
  },
  _create: function() {
    var self = this;
    this.tooltip = $("<div></div>")
      .attr("id", "ui-tooltip-" + increments++)
      .attr("role", "tooltip")
      .attr("aria-hidden", "true")
      .addClass("ui-tooltip ui-widget ui-corner-all ui-widget-content")
      .appendTo(document.body)
      .hide();
    this.tooltipContent = $("<div></div>")
      .addClass("ui-tooltip-content")
      .appendTo(this.tooltip);
    this.opacity = this.tooltip.css("opacity");
    this.element
      .bind("focus.tooltip mouseover.tooltip", function(event) {
        self.open( event );
      })
      .bind("blur.tooltip mouseout.tooltip", function(event) {
        self.close( event );
      });
  },

  enable: function() {
    this.options.disabled = false;
  },

  disable: function() {
    this.options.disabled = true;
  },

  _destroy: function() {
    this.tooltip.remove();
  },

  widget: function() {
    return this.element.pushStack(this.tooltip.get());
  },

  open: function(event) {
    var target = $(event && event.target || this.element).closest(this.options.items);
    // already visible? possible when both focus and mouseover events occur
    if (this.current && this.current[0] == target[0])
      return;
    var self = this;
    this.current = target;
    this.currentTitle = target.attr("title");
    var content = this.options.content.call(target[0], function(response) {
      // IE may...