懸停文本並顯示一個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表替換我的“我希望下面的表格懸停在這里”，但它不起作用。 所以我不得不打電話給桌子，我可以把桌子弄成一個但我無論如何都不能正確地稱它為...

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”上創建一個“title”，其元素為“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>

希望我幫助你。

Answer 2

簡單說明 - 將表格包裝在一個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 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>