JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Tooltip test</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js" ></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" ></script>
</head>
<body>
         
    <p>Change the text with the tooltip open and the value will not change. Change the text with the tooltip closed and it changes ok</p>
    <input id="input1" title="This is the inital value." onkeyup="changeTooltip(this);" onblur="displayValue(this.title);" />
    <table id="results">
      <tr><th>Title</th></tr>
    </table>
    <script type="text/javascript">
        $(function () {
            $(document).tooltip();
        });

        function changeTooltip(e) {
            e.title = 'This is a different value.';
            displayValue(e.title);
        }
      
      function displayValue(value){
        var table = document.getElementById('results');                         
        var row = table.insertRow(1); 
        row.insertCell(0).innerHTML = value;
      }
    </script>

</body>
</html>