悬停文本并显示 html table

Question

所以基本上我希望一些文本在您将鼠标悬停在它上面时显示 table，我正在使用这个基本的 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 table，当您将鼠标悬停在文本上时，我想显示：

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 table 替换我的 "I want the below table to be hovered here" 但它不起作用。所以我必须以某种方式调用 table，我可以将 table 设为 a 但无论如何我都无法正确调用它..

Answer 1

简单的解释 - 将 table 包裹在 div 中并给它一个像 'hide_this_table' 这样的 id 然后你可以

</script>

// start by hiding the div containing the table
$('#hide_this_table').hide();

// bind hover event
$('#some_text_id').hover(function() { // First function is a callback for the mouse over event
    $('#hide_this_table').show();
}, function() {                       // This second function is a callback for the mouse out event - you can remove it if you don't need it.
    $('#hide_this_table').hide();
});

</script>


<p id='some_text_id'>Show hidden table</p>

<div id="hide_this_table"> 
    <table>
        <tr>
            <th>Sex</th>
            <th>DOB</th>
        </tr>
        <tr>
            <td>Male</td>
            <td>1995</td>
        </tr>
    </table>
</div>

试试看...

Answer 2

像这样修改你的js

$(document).ready(function(){
    $("#demoTable").hide();
    $( "#demo" ).mouseover(function() {
        $("#demoTable").show();
    });
    $( "#demo" ).mouseout(function() {
        $("#demoTable").hide();
    });
});

并向标签添加一个 id，然后 table 然后将它们包装在 div 中，像这样

<div>
    <p><a id="demo" href="#" title="I want the below table to be hovered here">Table</a> to be hovered</p>
    <table id="demoTable" 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>
</div>

Answer 3

很简单：在你的 Html 中：添加一个 元素的 Id 像这样：

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

之后，为你的table添加第二个元素的Id，然后隐藏他（with: style : display:none) 像那样：

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

最后，仅使用 Jquery 工具提示 的功能来显示您的 table，当您的 "myHoverTitle" html 悬停：

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

这 Javascript 使用元素 "myContentHover" 的内容在您的元素 "myHoverTitle" 上创建一个 "title"！您有官方的 JQueryUI 工具提示文档 here。

另外，你可以把元素的title属性的内容去掉，就没用了：

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

收件人：

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

希望能帮到你。

Answer 4

像这样修改你的js

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

$(function () {
    $('.tblhover').attr('title', $('.tblcontent').remove().html())
    $(document).tooltip();
});

然后将 class 添加到（锚标记和 table 标记）中，按照下面的 HTML 代码

<a class="tblhover" href="#">Hover me</a>
<table class="tblcontent" border="4" bordercolor="black" cellpadding="15px" cellspacing="1">
     <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 table

Hover text and show a html table

html

javascript

css

jquery

jquery-ui-tooltip