JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<button id="show">OK with .show()</button>
<button id="showModal">KO with .showModal()</button>

<dialog>
    <p>Html5 &lt;dialog&gt; with a <span title="I am a jQuery UI tooltip">jQuery UI tooltip</span></p>
    <a>Close</a>
</dialog>

CSS

span, a {
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

// Open Html5 <dialog> with either .show() or .showModal()
$('button').click(function(e) {
    $(this).attr('id') == 'show' ? 
        $('dialog')[0].show() : $('dialog')[0].showModal();
});

// Close Html5 <dialog>
$('a').click(function(e) {
    $('dialog')[0].close();
});

// Init tooltip
$('span').tooltip();