JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<button data-button-icon="age-info" class="ui-button ui-widget ui-state-default ui-button-text-icon-primary showLegend" type="button"><span class="ui-icon age-icon age-icon-info ui-button-icon-primary"></span><span class="ui-button-text">Legenda</span>
</button>

<div style="width:50%" class="hidden" id="legend">
    <table width="95%" align="center" class="tableSgsStyle">
        <tbody>
            <tr bgcolor="#0162A7">
                <th class="MENU" colspan="3">Legenda</th>
            </tr>
            <tr align="left">
                <td width="33%"><span class="ui-icon age-icon age-icon-status-green" title="Aperto"></span> = Compito aperto</td>
                <td><span class="ui-icon age-icon age-icon-status-orange" title="Aperto in scadenza a 30 giorni"></span> = Compito aperto in scadenza a 30 giorni</td>
                <td width="33%"><span class="ui-icon age-icon age-icon-status-red" title="Aperto scaduto"></span> = Compito scaduto</td>
            </tr>
            <tr align="left">
                <td><span class="ui-icon age-icon age-icon-status-green-split" title="Aperto non iniziato"></span> = Compito aperto non iniziato</td>
                <td><span class="ui-icon age-icon age-icon-status-an" title="Annullato"></span> = Compito annullato</td>
                <td><span class="ui-icon age-icon age-icon-status-nc" title="Non conformità"></span> = Compito in non conformità</td>
            </tr>
            <tr align="left">
                <td><span class="ui-icon age-icon age-icon-status-ch" title="Chiuso"></span> = Compito chiuso</td>
                <td><span class="ui-icon age-icon age-icon-status-cc" title="Chiuso confermato"></span> = Compito chiuso confermato</td>
                <td><span class="ui-icon age-icon age-icon-status-sp" title="Sospeso"></span> = Compito sospeso</td>
            </tr>
            <tr align="left">
               ...

CSS

.hidden {
    display: none;
}

JavaScript

var t = $('button'),
    isOpen = false;

t.tooltip({
    create: function () {
        console.log(t.tooltip('option', 'content'));
        console.log(isOpen);
        isOpen = false;
    },
    open: function () {
        console.log('open');
        console.log(isOpen);
        isOpen = true;
    },
    close: function () {
        console.log('close');
        console.log(isOpen);
        isOpen = false;
    },
    content: "<div>" + $(t.data('legend') || '#legend').html() + "</div>",
    items: "button"
}).click(function() {
    console.log('click');
    console.log(isOpen);
    t.tooltip(isOpen ? 'close' : 'open');
});