Display a HTML table when hovering over text

Question

Display a HTML table when hovering over text

I am looking to display a table when hovering over text, and I have implemented 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>

This is the HTML table that should appear on hover:

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 attempted replacing the placeholder text with the HTML table, but it's not functioning as expected. Any suggestions on how to properly call and display the table?

javascript jquery html css jquery-ui-tooltip

Answer 1

Answer №1

Here's a simple way to achieve this: within your Html code, assign an Id to an element like so:

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

Next, give your table a second Id and hide it by adding the style attribute with display:none property:

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

Lastly, utilize the Jquery toolTip function to show your table when hovering over "myHoverTitle":

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

This JavaScript feature creates a tooltip for "myHoverTitle" using the content of "myContentHover"! Refer to the official JQueryUI tooltip documentation here.

You can also remove the unnecessary content from the title attribute of the element, making it cleaner:

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

Change it to:

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

I hope this explanation was helpful.

Answer 2

Here's a simple way to achieve this: within your Html code, assign an Id to an element like so:

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

Next, give your table a second Id and hide it by adding the style attribute with display:none property:

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

Lastly, utilize the Jquery toolTip function to show your table when hovering over "myHoverTitle":

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

This JavaScript feature creates a tooltip for "myHoverTitle" using the content of "myContentHover"! Refer to the official JQueryUI tooltip documentation here.

You can also remove the unnecessary content from the title attribute of the element, making it cleaner:

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

Change it to:

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

I hope this explanation was helpful.

Answer 3

Answer №2

An Easy Way to Hide and Show a Table

</script>

// Begin by wrapping the table in a div with an id of 'hide_this_table'
$('#hide_this_table').hide();

// Add hover event
$('#some_text_id').hover(function() { 
    $('#hide_this_table').show();
}, function() {                      
    $('#hide_this_table').hide();
});

</script>


<p id='some_text_id'>Click here to reveal the hidden table</p>

<div id="hide_this_table"> 
    <table>
        <tr>
            <th>Gender</th>
            <th>Date of Birth</th>
        </tr>
        <tr>
            <td>Male</td>
            <td>1995</td>
        </tr>
    </table>
</div>

Give it a try...

Answer 4

An Easy Way to Hide and Show a Table

</script>

// Begin by wrapping the table in a div with an id of 'hide_this_table'
$('#hide_this_table').hide();

// Add hover event
$('#some_text_id').hover(function() { 
    $('#hide_this_table').show();
}, function() {                      
    $('#hide_this_table').hide();
});

</script>


<p id='some_text_id'>Click here to reveal the hidden table</p>

<div id="hide_this_table"> 
    <table>
        <tr>
            <th>Gender</th>
            <th>Date of Birth</th>
        </tr>
        <tr>
            <td>Male</td>
            <td>1995</td>
        </tr>
    </table>
</div>

Give it a try...

Answer 5

Answer №3

adjust your JavaScript code:

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

also, make sure to give an id to the anchor tag and the table, then enclose them in a div element as shown below:

<div>
    <p><a id="demo" href="#" title="Hover over me to see the table below">Click Here</a> to reveal the hidden table</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 the table content</b></h1>
                    <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px">
                        <li>
                            <h1>First Point of Interest</h1>
                        </li>
                        <li>
                            <h1>Second Point of Interest</h1>
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 6

adjust your JavaScript code:

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

also, make sure to give an id to the anchor tag and the table, then enclose them in a div element as shown below:

<div>
    <p><a id="demo" href="#" title="Hover over me to see the table below">Click Here</a> to reveal the hidden table</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 the table content</b></h1>
                    <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px">
                        <li>
                            <h1>First Point of Interest</h1>
                        </li>
                        <li>
                            <h1>Second Point of Interest</h1>
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 7

Answer №4

Revise your JavaScript code in the following manner

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

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

Subsequently, assign classes to the (anchor tag and table tag) as seen in the HTML snippet below

<a class="tblhover" href="#">Hover over 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>Here is the first point</h1>
                     </li>
                     <li>
                         <h1>Here is the second point</h1>
                     </li>
                 </ul>
             </td>
         </tr>
     </tbody>
 </table>

Answer 8

Revise your JavaScript code in the following manner

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

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

Subsequently, assign classes to the (anchor tag and table tag) as seen in the HTML snippet below

<a class="tblhover" href="#">Hover over 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>Here is the first point</h1>
                     </li>
                     <li>
                         <h1>Here is the second point</h1>
                     </li>
                 </ul>
             </td>
         </tr>
     </tbody>
 </table>

Display a HTML table when hovering over text

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issues with positioning divs in the header and main sections

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

Experiencing issues on the live server as it appears that Bootstrap is not functioning properly

Challenge with AngularJS ng-select and ng-switch-when functionality

Unlocking the Power of refs in React's this.props.children

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

Container that can be scrolled under varying heights

Is it possible to retrieve the decimal value from the KendonumericTextbox?

Is it possible to utilize Angular validation directives programmatically within a personalized directive?

Setting the parent's height to match one of its children

Deactivate a feature by clicking on it

Determine a specific value in a JSON array of objects and retrieve a different value using Angular

Loading a basic content snippet dynamically within a view

Why isn't the background image showing up on iOS devices when using the slider?

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

The ios browser environment is unable to retrieve the value during vuejs development

Jquery Image Slider showcasing a variety of image sizes

Unfortunately, I am currently unable to showcase the specifics of the items on my website

Tips for verifying that jQuery is functioning correctly and that the Jquery.min.js file has been properly loaded

What is the best way to align the input within the space between the buttons using Bootstrap 5?