将鼠标悬停在文本上并显示 html 表格

Question

所以基本上我希望当你将鼠标悬停在表格上时显示一些文本，我使用这个基本的 jquery/CSS 代码：

<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>

这是当您将鼠标悬停在文本上时我想要显示的 HTML 表格：

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>

显然，我尝试用简单的 HTML 表格替换“我希望下表悬停在此处”，但它不起作用。所以我必须以某种方式调用该表，我可以将表设置为 a 但无论如何我都无法正确调用它..

Answer 1

这很简单：在你的 Html 中：添加一个元素的 Id ，如下所示：

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

之后，为表添加第二个元素的 Id ，然后隐藏他（使用： style : display:none ），如下所示：

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

最后，当您的“myHoverTitle”html悬停时，仅使用Jquery toolTip的函数来显示您的表格：

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

此 Javascript 在元素“myHoverTitle”上创建一个“标题”，其中包含元素“myContentHover”的内容！您可以在此处获取官方 JQueryUI 工具提示文档。

另外，您可以删除元素的标题属性内容，它变得无用：

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

到 ：

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

希望我能帮助你。