JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is<br>e r ert er<br>ert ert er <b>test</b><br>ert ert er etrt ert ert er ter tert er t">Test</a><br>
<a href="#" class="tooltip" data-description="That&apos;s what this widget is<br>e r ert er<br>ert ert er <b>test</b><br>ert ert er etrt ert ert er ter tert er t">Test2</a>

JavaScript

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});