Title attribute to table cells with ellipsis. Also works well for Twitter Bootstrap Tooltip.

rtwood

I figured I would share a solution and ask for help at the same time :)

** Solution in next comment **

I set css to ellipsis for cell content that exceeds the cell width. However, when doing this I wanted to add a title attribute to the cell so that a visitor can see the remaining ellipsis content i.e. text that is hidden. The normal tooltip in browsers will display the full contents when hovering over the . I believe that jquery is required for this to work, but I could be wrong. This code when added to fndrawcallback will work if you want a simple hover tooltip:

[code]$(function(){$("td").each(function(a){this.offsetWidth

rtwood

Ok. I got it working for bootstrap. The problem was that I was wrapping the including the tooltip for the and not the innerhtml. So the entire was being tooltipped, not just the cell data. No wonder why it was breaking the table :)

Here is working code for creating ellipsis and adding Bootstrap Tooltip to table cells.
remember the have the code below within the fnDrawCallback:function(){

[code]

//detects the ellipsis and wraps with tooltip span
//includes the cell contents in tooltip contents

$(function(){$("td").each(function(a){this.offsetWidth