I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?
Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}
Related
I have this short piece of code that allows for sections of a table to be collapsed (they are like collapsible headers). This is neat, but I'm trying to make for the inverse to happen upon loading the page -- to be collapsed by default on load, but expandable when clicked. How would I go about doing this?
My present code, shown below, also features sections that only collapse when the words in the section are clicked, not when the section itself (outside of the words) are clicked. This is because I used labels to make the collapsible. Is there a way to make the entire row expandable/collapsible?
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
</script>
I'm trying to make for the inverse to happen upon loading the page --
to be collapsed by default on load, but expandable when clicked. How
would I go about doing this?
Simply add a line in your jquery above your toggle function and call on your .hide class selector and use .hide(); Then when you click it the toggle function fires.
also features sections that only collapse when the words in the
section are clicked, not when the section itself (outside of the
words) are clicked. This is because I used labels to make the
collapsible. Is there a way to make the entire row
expandable/collapsible?
Yes... Make your label display as block in your CSS file...
label {
display: block;
}
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="2">
<label for="section">Click me!</label>
<input type="checkbox" id="section" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td>100</td>
</tr>
<tr>
<td>Jill</td>
<td>300</td>
</tr>
</tbody>
</table>
Several things going on here...
You were hiding your checkbox, which I don't think was your intent.
Check this example, where I fixed some things: https://jsfiddle.net/za73qf65/
Fixes include:
changing the name of your "hide" class to "hidable"
defaulting that "hidable" class to be display:none
unhiding your checkbox
changing your change() event handler to a click() (optional)
attaching your event handler to a button with an ID (you can vary that)
Point is, with my changes, your example works. You might want to tweak it for a more specific need.
I have a question about a html table, i know a windows application that has this, a vertical scrollable table, but some columns are fixed on the page and others are always outside the page. I have a example:
The black border is the page, wich is responsive.
The red border is the table.
The green border is the part that is always fullscreen on the page,
always with The same columns.
The blue border is the part thats always off the screen with
information thats not required but if you need it you can scroll to
the right.
Anyone have an idea how to do this? In CSS? Or do i need Javascript for it?
My current code:
This class is attached to the tag.
/*MAIN TABLE*/
.tableMain {
font-size: 13px;
margin: 0;
padding: 0;
width: 200%;
table-layout: fixed;
}
But i think i need 2 classes, 1 on page class, and 1 off page class so i can define the columns that should be ouside the page. But i really dont know how to do that. Currently i've edited my headercells with this idea.
.tableCell, .tableHeaderCell{
width: 8.5%;
}
.tableSecondCell{
width: 150px;
}
This is my current HTML:
<table class='tableMain'>
<thead class='tableHeader'>
<tr class='tableHeaderRow'>
<th class='tableCell'>Name</th>
<th class='tableCell'>Email</th>
<th class='tableCell'>Role</th>
<th class='tableCell'>Username</th>
<th class='tableCell'>Department</th>
<th class='tableSecondCell'>Team</th>
<th class='tableSecondCell'>Web</th>
<th class='tableSecondCell'>App</th>
</tr>
</thead>
<tbody class='tableBody'>
<tr class='tableRow'>
<td class='tableCell'>User Name</td>
<td class='tableCell'>username1#example.com</td>
<td class='tableCell'>employee</td>
<td class='tableCell'>username1</td>
<td class='tableCell'>Support</td>
<td class='tableSecondCell'>Team1</td>
<td class='tableSecondCell'>True</td>
<td class='tableSecondCell'>True</td>
</tr>
</tbody>
</table>
Thanks for your time.
You can use instead below css for the table to scroll
.tableMain {
width: 100%;
max-width: 100%;
}
and wrap a div .table-responsive around table tag
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
I have done extensive Google searches and implemented a number of solutions found here at stack overflow and at other sites but have not been able to get my table to scroll under program control.
I am implementing a scrolling table of variable names to use in a plot. I have 200+ variables so I want users to be able to type some fragment of a variable's name and show that variable in the list by scrolling. I have this all working except the scrolling part.
This is what a table looks like:
http://www.oceanatlas.com/images/list1.png
This is the HTML that defines the table:
<div id="ySeriesParamChooser" class="ParamChooser">
<table id="yparamtable" cellspacing="0" border="1" >
<thead class="fixedHeader">
<tr>
<th colspan="3">Primary Y Axis</th>
</tr>
</thead>
<tbody class="scrollContent" style="text-align: center;">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
I create the contents of the table programatically using Javascript. As you can see from the image link above the table looks and functions as I designed.
Here is the some relevant CSS:
html>body tbody.scrollContent {
display: block;
height: 193px;
overflow: auto;
table-layout: fixed;
font-family: Helvetica, Palatino, Arial, sans-serif;
font-size: 0.8em;
width: 100%
}
.ParamChooser {
padding: 0px 10px 0px 0px;
float:left;
font-family: Droid Sans, Arial, Helvetica, sans-serif;
font-size: .8em;
cursor:default;
}
What I have tried:
// this code correctly find the nth <tr> in the table
var symTarg = "#" + this.jqSel ;
var row = $(symTarg).find('tr').eq(n);
row.scrollIntoView(); // this doesn’t do anything
// this didn’t do anything
var scrollTarg = "#" + this.jqSel + “.scrolltable"; // jqSel == "yparamtable"
var row = $(symTarg).find('tr').eq(n);
if (row.length) {
$(scrollTarg).scrollTop(row.offset().top - ($(scrollTarg).height()/2));
}
// tried this to see if I could just scroll to the last row
var symTarg = "#" + this.jqSel ; // jqSel == "yparamtable"
var rowpos = $(symTarg).find('tr:last').position(); // finds last <tr>
var content = $(symTarg).find('tbody.scrollcontent');
$(content).scrollTop(rowpos.top);
So, what am I doing wrong? I am an experienced programmer but new to UI programming in Javascript.
Here is a fiddle of the scrolling working : https://jsfiddle.net/070vx0oo/7/
First, in order to scroll to a specific element, you have to select only the element and not its parent, to get its position :
var rowpos = $('.scrollContent > tr:eq(4)').position(); // finds the 5th <tr> child of .scrollContent
Here the elements are the TRs. The position is relative to the first parent, which is .scrollContent (tbody)
Then, we need to scroll INTO this parent. So we select .scrollContent which is the parent we are talking about, and use scrollTop().
var content = $('.scrollContent');
$(content).scrollTop(rowpos.top);
So we scroll to the position of our TD.
Also note that I had to add this CSS to our parent (remember, the one called .scrollContent) so that we can scroll into it.
.scrollContent{
display:block; /* Allows us to resize the element */
overflow: auto; /* Automatically adds scrollbars if content overflows */
height:100px; /* Our custom table height */
position:relative; /* Important ! so javascript get accurate position */
}
Now you just have to implement it in your own JavaScript, by selecting the correct TR for var rows.
I hope it helped you to understand.
I want to make a table in which hovering over a row makes some buttons appear for that row. Right now, I have the buttons (actually just text) always there, and when a table row is hovered over, I change the visibility on the buttons from hidden to visible. However, the hover event does not seem to trigger on a hidden td element, even though the event is actually on the tr. How can I fix this? I don't want to just set the opacity to 0 because then they still can be clicked on (right?). Eventually I want to be able to turn on and off the hover effect by adding/removing a class, so that is why the opacity doesn't work.
My code looks like this: http://jsfiddle.net/h7oh9xvk/
HTML:
<table>
<tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
<tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
<tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
</table>
CSS:
.precell, .postcell {
visibility: hidden;
}
tr:hover .precell {
visibility:visible;
}
tr:hover .postcell {
visibility:visible;
}
Edit: Additional Information: One of the main problems seems to be that the space between td elements in a row does not seem to count as part of the row (does not trigger the hover event on the row). When I move the mouse horizontally from one cell to another, it seems there is a space between td's where the hover "shuts off." Is there a way to stop this? That might fix the problem.
You can use display: none / display: table-cell:
table {
table-layout: fixed;
}
.precell, .postcell {
display: none;
width:0px;
}
tr:hover .precell {
display: table-cell;
}
td {
display: inline-block;
float:left;
}
tr:hover .postcell {
display: table-cell;
}
tr, td {padding:0px;}
<table>
<tr>
<td class='precell'>X</td>
<td style="margin-left:15px;">blablabla</td>
<td class='postcell'>[edit]</td>
</tr>
<tr>
<td class='precell'>X</td>
<td style="margin-left:15px;">blablabla</td>
<td class='postcell'>[edit]</td>
</tr>
<tr>
<td class='precell'>X</td>
<td style="margin-left:15px;">blablabla</td>
<td class='postcell'>[edit]</td>
</tr>
</table>
Updated after #Mary Melody comment.
It seems that it is simply impossible to trigger a hover event in the way I wanted, but it turns out there is an easy solution. If we include a div within the td, and act on that instead, it works perfectly:
.precell, .postcell {
visibility: hidden;
}
tr:hover .precell {
visibility:visible;
}
tr:hover .postcell {
visibility:visible;
}
<table>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
<tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
</table>
I have an AngularJS module with a page that shows a table of topics and subtopics. Each topic is a tbody element with 2 rows: one representing the topic name, and one containing a nested table where the rows are the subtopics. Each topic has an expand / collapse button that controls the subtopics, i.e. ng-shows / hides the row where the subtopics table is:
<table>
<tbody ng-repeat="topic in topics">
<tr>
<td>{{topic.name}}</td>
<td class="toggle-subtopics" ng-click="toggleSubtopics(topic)">Expand / collapse</td>
</tr>
<tr class="test-height" ng-show="topic.expanded">
<td colspan=2>
<table>
<tr ng-repeat="subtopic in topic.subtopics">
<td>{{subtopic.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I'd like the subtopics row to appear / disappear with ng-animation, but the main problem is that no matter what I do, I can't seem to control the height of this row.
Fiddle
In order to control a td height you need to work on the line-height instead of height
Fiddle
Code Snippet:
.test-height {
line-height: 40px !important; /* This doesn't affect the height of the row */
}
Option 1:
Updated Code:
.table > tbody > tr >td {
line-height: 40px !important;
}
Updated Fiddle Option 1
Option 2:
If you do not want to mess with bootstrap global space you can create your own class and assign that to individual td
Updated Code:
.fixed-height {
line-height: 40px !important;
}
Updated Fiddle Option 2
Try This:
.test-height {
height: 3px;
overflow:hidden;
display:block;
}