So basically I want some text to show a table when you hover your mouse over it, im using this basic jquery/CSS code:
<meta charset="utf-8" />
<title></title>
<link href="//code.jquery/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery/jquery-1.10.2.js"></script><script src="//code.jquery/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>
And this is the HTML table that I would like to show when you hover over the text:
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 obviously tried just replacing my "I want the below table to be hovered here" with my simple HTML table but its not working. So I somehow have to call the table, I could make the table a but I cant call it properly anyhow..
So basically I want some text to show a table when you hover your mouse over it, im using this basic jquery/CSS code:
<meta charset="utf-8" />
<title></title>
<link href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery./jquery-1.10.2.js"></script><script src="//code.jquery./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>
And this is the HTML table that I would like to show when you hover over the text:
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 obviously tried just replacing my "I want the below table to be hovered here" with my simple HTML table but its not working. So I somehow have to call the table, I could make the table a but I cant call it properly anyhow..
themeroller but not jquery-ui? It's part of jquery-ui: jqueryui./tooltip
– fdomn-m
Commented
Jan 8, 2016 at 11:51
It's easy: in your Html : add an element's Id like that :
<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>
After, add a second element's Id for your table, and hide him(with: style : display:none) like that :
<table id="myContentHover" border="4" bordercolor="black" cellpadding="15px"
cellspacing="1" style="width: 800px;display:none">
<!-- Your table content -->
</table>
And, finally, use just the Jquery toolTip's function for display your table, when your "myHoverTitle" html is on hover :
$(function() {
$( '#myHoverTitle' ).tooltip({ content: $('#myContentHover').html() });
});
This Javascript create a "title" on your element "myHoverTitle" with the content of the element "myContentHover" ! You've the official JQueryUI tooltip documentation here.
Also, you can remove the title's attribute's content of the element, it bees useless:
<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>
To :
<a href="#" id="myHoverTitle" title="">Table</a>
Hope I help you.
Simple Explanation - wrap the table in a div and give it an id like 'hide_this_table' then you can
</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>
try it out...
modify your js like
$(document).ready(function(){
$("#demoTable").hide();
$( "#demo" ).mouseover(function() {
$("#demoTable").show();
});
$( "#demo" ).mouseout(function() {
$("#demoTable").hide();
});
});
and add a id to a tag and the table then wrap them in a div like this
<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>
Modify your js like this
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(function () {
$('.tblhover').attr('title', $('.tblcontent').remove().html())
$(document).tooltip();
});
then add class into the (anchor tag and table tag) as per below HTML code
<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>