Tooltip for particular cell

Notace

This question has a couple of parts to it.
My user wants a large amount of data put into a cell, so he can search for it using the filter. But he doesn't want to see all the contents of the cell (so keeping each row of the table a single line). My questions are:
1. Can I set up the cell contents so only the first line are displayed, so the cell content doesn't wrap, and the row remains the same size as others?

2. Can I set up a hover or click event or tooltip for individual cells, so that the user can hover over or click the cell to show the complete contents.

Note that the filter needs to have access to all the data, even if only part of it is displayed in the cell.

Thanks for your help. Datatables is a fantastic tool (my users love it).

Notace

Here's a little more detail.

Say that for a particular row, a column contains "The quick brown fox jumps over the lazy programmer", but I only want it to be a narrow column, with no wraparound, so that the user might only see "The quick brown", but the row will still be visible if they type "programmer" into the search box.

If the user hovers (or clicks) on the cell containing the text, he gets a popup with the full text.

Can this be done? And how do I stop the cells from wrapping, and therefore getting taller than other rows. I'd like all my rows to be the same height.

Thanks.

GregP

Hey Notace,

Stopping the wrapping involves modifying your CSS (I believe the selector is table.display td {} ) so that it has the attributes "overflow:hidden" and optionally "text-overflow: ellipsis" so that truncated text is indicated by an ellipsis (three dots).

Surprisingly, text-overflow isn't properly supported by Firefox 3.6.x, but I found an article that showed a way to hack it in there with -moz-binding (a vendor CSS attribute I had never heard of in my life). I can find the link if you think ellipses are the way to go for you.

Regarding showing the contents, the sky's the limit on how you want to approach it. Without providing any specific code, it's just a matter of binding the jQuery .hover() event to your TDs, triggering the tooltip function that would likely clone the contents of the TD into a new tooltip DIV and show it.

If you decide to use a jQuery plugin for the tooltip (and there are many!) it might require adding a class to all the cells, which can be done with a few different DataTables options/callbacks. There are zillions of ways to skin the cat, but my first (and I'm no Allan!!) impulse is to find a nice simple plugin that will do most of what you want out of the box, and call its functionality from DataTables' fnDrawCallback.

Sorry for the generic advice. I'll be doing something very similar shortly, and if you're still finding no satisfaction I might have some actual code by then. On the other hand, if you beat me to it, you might make MY life easier! (grin)

Greg

Notace

Hi Greg

Thanks for the reply. I'd already tried changing the CSS file as you suggested, as well as using an inline style on the particular column in question, but it made no difference. The text still wrapped around. Like you, I'm all for finding a nice PlugIn. I'm not clever enough to do this stuff from scratch.

Just a thought. Is it possible that a minor HTML error (mismatched tags is my favourite) could break the overflow: hidden; CSS? I've noticed that this happens sometimes.

I'll let you know if I have a Eureka moment.

GregP

Notace,

I have the overflow:hidden working in my application, so it's definitely doable.

It could be as simple as your "display" attribute. I believe that if your element is set to "display:inline" (either explicitly or as a browser default like a span element is) then overflow:hidden will not work. Changing a TD element to be "display:block" shouldn't affect table layout much, so give that a go. Might be the only rule you need to add. If not....

CSS is a funny beast in its rules for selector specificity. Sometimes to get a particular rule to work, you need to figure out a more specific selector. For example, if td { overflow: hidden } doesn't work, you might have to see if other classes are overriding it. If so, you might end up needing "table td {overflow: hidden}" (selecting based on two elements is stronger than selecting based on one).

Your indispensible tool for this will be the Developer Tools in webkit browsers, or Firebug for Firefox (which is my personal preference). After writing your overflow:hidden rule, you can view the DOM in the Firebug DOM to see if it's been crossed out and which more powerful selector caused it to be crossed out.

Mismatched tags is always a possible bug to look out for. Using an editor or IDE that automatically warns about such errors is another lifesaver. For Windows, I used Notepad++ for a long time, though I'm now using Netbeans IDE.

GregP

Notace,

I was digging through my CSS when I noticed I also had this property set:

white-space: nowrap;

Seems to be related; I noticed that when I put an anchor tag into the cell, the text wasn't being hidden anymore. Adding overflow:hidden did nothing to fix it, but when I added the above property, everything worked as expected.

Notace

Hi GregP,

Getting very close to getting this working. Given the following HTML


<

Test Datatable Wrapping



@import "C:/DataTables/media/css/ase_page.css";
@import "C:/DataTables/media/css/ase_table.css";





<!--- This initialises the DataTables on the page. --->
jQuery(document).ready(function() {
oTable = jQuery('#quotes').dataTable( {
"sScrollY": "300px",
"bScrollCollapse": true,
"bPaginate": false,
"bAutoWidth": true,
"bSort": true,
"bInfo": false,
"aaSorting": [[ 0, "asc" ]],
"oLanguage": {"sSearch": "Search all columns:"}
} );
jQuery('#quotes tbody td').live('mouseover', function() {
var sTitle;
sTitle = jQuery(this).text();
this.setAttribute( 'title', sTitle );
} );
jQuery(oTable.fnGetNodes()).tooltip({ //tooltip plugin for jQuery!
"delay": 250,
"track": true
});
});











Open Quotes


Quote Num
Description
Alert
Comments




1001
MF5425 4WD CAB DYNA4
No Alerts
AA AB BBBBBBB DDDDD EEEEE FFFFF GGGGG HHHHH IIIIII JJJJJJ KKKKKK LLLLLLL MMMMMMMMM


1002
ISEKI TM3240 4WD TRACTOR
No Alerts
AA AB BBBBBBB DDDDD EEEEE FFFFF GGGGG IIIIII JJJJJJ KKKKKK LLLLLLL MMMMMMMMM







I also added a class to my CSS file (ASE_table.css, which is the same as Demo_table.css with my local changes). There are other small tweks in the CSS file, but I don't think they are relevant.

table.display td.nowrap{
overflow: hidden;
white-space: nowrap;
display:block;
}


So what happens? Well, the overflow text is hidden, and I've managed to get a tooltip happening, using the jQuery tooltip plug-in (more on that later). My problem now is that when the page first displays, I don't have a vertical scrollbar, and the body of the table is shifted to the right by the width of the scrollbar, relative to the headings. If click on a column header to change the default sorting, the scrollbar appears and the columns line up nicely.

The actual rendered width of the column is 68px. If I hard-code this into the max-width in my tags, the table opens up looking fine, with everything aligned and a scrollbar where it should be. I need the max-width defined otherwise the nowrap and hidden don't work.

Any thoughts??

As I said, I used the jQuery tooltip plug-in. As I've set it up, it displays a tooltip for ANY cell that you hover over. I'd like to determine which column I'm in, and only display the tooltip if I'm in the "Comments" column. No doubt, I could change the javascript in the

jQuery('#quotes tbody td').live('mouseover', function()

to do this, but I don't know how. Can you shed any light on this?

Many thanks for all your previous help on this. Getting really close now, and it would be great to be able to remove the now-you-see-it-now-you-don't behaviour of the scrollbar, which spoils an otherwise slick display.

I hope I've explained all of this clearly enough.

Thanks, Ron (Notace)

Notace

Hi.

I've sorted out the tooltip question. By changing

jQuery('#quotes tbody td').live('mouseover', function() {

to

jQuery('#quotes td.nowrap').live('mouseover', function() {

the tooltip only appears when I hover over a cell which has a class="nowrap" attribute.


I also discovered that as long as I set my max-width to equal or greater than the rendered width, the scrollbar is rendered correctly when the table is first displayed. I'd still rather not have to do this though.

Thanks

Ron

Notace

Grrrrrrrrr.

I did my testing in Chrome (so I could use the Developer tools). As soon as I tried it in IE, hidden and nowrap stopped working. Well, not completely. The displayed text was truncated, and didn't wrap, but the column widths were all over the place, and I suddenly had a horizontal scroll bar. The Comments column, which is the one that I don't want to wrap, only shows as much text as my max-width attribute, but the actual cell is much wider. And the header for the following was blank - although oddly enough the sorting still worked.

Would you be able to send me a sample of html/css that definitely works in IE?

Thanks.

GregP

I'm not sure that my markup and CSS will be much different than yours, but I think it's the differences in our scenarios may be important:

1. I'm not using the tooltip functionality yet; this seems to be a relevant factor. I would guess this is the major difference.
2. I am only supporting (and therefore only testing) in IE8+. If you're working in IE6 or IE7, I haven't tested in order to confirm how badly they're broken in those versions. ;-) Which IE versions are you supporting?

Here's a screenshot of my cells in action in IE8:

http://plixi.com/p/77310511

The HTML is nothing special, and there are no DataTables parameters being executed on the columns in question. It's just CSS. Although some of these properties will be totally irrelevant, here's the entire catalog of CSS properties affecting the cells other than the Progress column:

table.display td {
padding: 3px 10px;
overflow: hidden;
text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
white-space: nowrap;
}

/* (the -moz-binding will have nothing to do with IE; it's a vendor prefix, and part of the ellipsis hack I mentioned earlier in the coversation) */

html, body, div, span, a, img, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, em, pre, strong, object, iframe, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section, menu {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0 none;
text-align: left;
vertical-align: baseline;
}

/* (part of my reset) */

table.display { border-collapse: collapse;}

.ui-widget { font-size: 11px;}

/* jQuery UI rule; normally uses ems or percent but I personally changed it to use pixel value */

table { border-spacing: 0;}

---

That's it. Like I said, the HTML isn't worth repeating; it's standard ol' HTML table. No hard-coded width set.