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>

我显然已经尝试过更换我的＆＃34;我希望下面的表格悬停在这里＆＃34;用我简单的HTML表，但它不起作用。所以我不得不打电话给桌子，我可以把桌子弄成一个但是我无论如何都不能称它为正确..

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>

最后，只需使用 Jquery toolTip 的功能来显示您的表格，当您的＆＃34; myHoverTitle＆＃34; html正在悬停：

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

这个Javascript创建一个＆＃34;标题＆＃34;在你的元素＆＃34; myHoverTitle＆＃34;与元素的内容＆＃34; myContentHover＆＃34; ！您已经获得了官方JQueryUI工具提示文档here。

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

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

致：

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

希望我帮助你。

Answer 2

简单说明 - 将表格包装在一个div中并给它一个像＆＃39; hide_this_table＆＃39;那么你可以

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

修改你的js，如

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

并为标记添加一个id，然后将表格包装在像这样的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 4

像这样修改你的js

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

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

然后按照以下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表

4 个答案: