JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">
<input type='text' size=4 />
<div class='uurcomment' style='display: none;'>
  <textarea name='test'></textarea>
</div>

JavaScript

$(document).ready(function() {

  $('input').each(function() {

    var inputhandle = $(this);
    
    $(this).qtip({
      content: {
        text: function(api) {
          return $(this).next('.uurcomment').html()
        },
        button: 'Close',
        title: 'blablablas'
      },
      show: {
        event: 'click',
        effect: function() {
          $(this).fadeTo(200, 1);
        }
      },
      hide: {
        event: 'unfocus',
        effect: function() {
          $(this).fadeTo(200, 0);
        }
      },
      style: {
        tip: {
          corner: true,
          width: 20,
          offset: 5
        },
        classes: 'qtip-light qtip-rounded'
      },
      events: {
        hide: function() {
          inputhandle.next('.uurcomment').find('textarea').val($(this).find('textarea').val());
        },
        visible: function() {
          $(this).find('textarea').val(inputhandle.next('.uurcomment').find('textarea').val());

        }
      }

    });

  });
});