qTip2 - My test case

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/basic/jquery.qtip.js"></script>
<a href="#" class="tooltip" title="My Title">hover here</a>
<div class="tooltip-content">
    <table>
        <tr>
            <th>Heading1</th>
            <th>Heading2</th>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
    </table>
</div>

CSS

body {
    margin: 100px;
}
.tooltip-content {
    display: none;
}

JavaScript

$('a.tooltip').qtip({
    content: {
        title: {
            text: function(event, api) {
                return $(api.target).attr('title');
            },
           button: true
 
        },
        text: function(event, api) {
            return $(api.target).next('.tooltip-content');
        }
    }
});