JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0-rc.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">
<p>The Tooltip destroy method is not clearing up the data properties. </P>

<p>After creating,opening and destroying a tooltip, the data properties are not getting disposed of correctly. Notice how the "ui-tooltip-id" still contains a value after the destroy method is called.</p>
This applies to tooltipOpen
<p>
    <br />
    <input type="text" id="inp" title="my message" /></p>
<br />

<div>Before tooltip initialised: <span id="before"></span></div>
<div>After tooltip open: <span id="afterInit"></span></div>
<div>After tooltip destroyed: <span style="color:red" id="afterDestroy"></span></div>

CSS

/*!
* jQuery UI Tooltip @VERSION
* http://jqueryui.com
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
.ui-tooltip {
padding:8px;
position:absolute;
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

var textBox = $("#inp");
    
//"ui-tooltip-id" should not exist yet
$("#before").html(textBox.data("ui-tooltip-id"))   
//var fakeEvent = $.Event("Test", { target: textBox, originalEvent: "Test" });
textBox.tooltip({track:true})
//textBox.tooltip("open",fakeEvent );
    textBox.tooltip("open" );
//"ui-tooltip-id" should now exist
$("#afterInit").html(textBox.data("ui-tooltip-id"))

//Now destroy    
textBox.tooltip("destroy");

//"ui-tooltip-id" along with all other relavent data properties(tooltipOpen, uiTooltipTitle) should be removed by the destroy method.
$("#afterDestroy").html(textBox.data("ui-tooltip-id"))