Hover text and show a html table

Question

So basically I want some text to show a table when you hover your mouse over it, im using this basic jquery/CSS code:

<meta charset="utf-8" />
<title></title>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="/resources/demos/style.css" rel="stylesheet" />
<script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
<style type="text/css">
label {
    display: inline-block;
    width: 5em;
  }</style>
<p>
    <a href="#" title="I want the below table to be hovered here">Table</a> to be hovered</p>

And this is the HTML table that I would like to show when you hover over the text:

HTML:

<table border="4" bordercolor="black" cellpadding="15px" cellspacing="1" style="width: 800px;">
    <tbody>
        <tr>
            <td>
                <h1>
                    <b style="list-style-type: disc; margin-left: 25px; margin-right:5px">This is my table</b></h1>
                <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px">
                    <li>
                        <h1>
                            This is my first point</h1>
                    </li>
                    <li>
                        <h1>
                            This is my second point</h1>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

I have obviously tried just replacing my "I want the below table to be hovered here" with my simple HTML table but its not working. So I somehow have to call the table, I could make the table a but I cant call it properly anyhow..

Answer 1

It's easy: in your Html : add an element's Id like that :

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

After, add a second element's Id for your table, and hide him(with: style : display:none) like that :

<table id="myContentHover" border="4" bordercolor="black" cellpadding="15px"
       cellspacing="1" style="width: 800px;display:none">
    <!-- Your table content -->
</table>

And, finally, use just the Jquery toolTip's function for display your table, when your "myHoverTitle" html is on hover :

$(function() {
    $( '#myHoverTitle' ).tooltip({ content: $('#myContentHover').html() });
});

This Javascript create a "title" on your element "myHoverTitle" with the content of the element "myContentHover" ! You've the official JQueryUI tooltip documentation here.

Also, you can remove the title's attribute's content of the element, it becomes useless:

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

To :

<a href="#" id="myHoverTitle" title="">Table</a>

Hope I help you.